@font-face {
font-display: swap;
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url('https://www.sichtbar-macher.online/webfonts/roboto-v48-latin-300.woff2') format('woff2');
}

@font-face {
font-display: swap;
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url('https://www.sichtbar-macher.online/webfonts/roboto-v48-latin-700.woff2') format('woff2');
}

@font-face {
font-display: swap;
font-family: 'Noto Sans';
font-style: normal;
font-weight: 300;
src: url('https://www.sichtbar-macher.online/webfonts/noto-sans-v39-latin-300.woff2') format('woff2');
}

@font-face {
font-display: swap;
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
src: url('https://www.sichtbar-macher.online/webfonts/noto-sans-v39-latin-700.woff2') format('woff2');
}

@font-face {
font-display: swap;
font-family: 'Noto Serif';
font-style: italic;
font-weight: 400;
src: url('https://www.sichtbar-macher.online/webfonts/noto-serif-v30-latin-italic.woff2') format('woff2');
}

:root {
--color-weiss: #FFFFFF;
--color-grau: #494948;
--color-gelb: #FFF044;
--color-blau: #BCE2F1;
--fontsize-1: 2.7vw;
--fontsize-2: 5.0vw;
--fontsize-3: 5.0vw;
--fontsize-4: 6.0vw;
--fontsize-5: 6.0vw;
--fontsize-6: 6.5vw;
--fontsize-7: 15.0vw;
--lineheight-1: 1.0em;
--lineheight-2: 1.2em;
--lineheight-3: 1.4em;
--lineheight-4: 1.4em;
--margtop-1: 0em;
--margtop-2: 0.5em;   /* 10px */
--margtop-3: 2em;   /* 30px */
--margtop-4: 3em;   /* 50px */
--margtop-5: 4em;    /* 60px */
--margbot-1: 0em;
--margbot-2: 0.7em;  /* bleibt 0.7em */
--margbot-3: 1em;    /* bleibt 1em */
--margbot-4: 0.3em; /* 5px */
--margbot-5: 0.6em;  /* 10px */
--margbot-6: 1.25em;   /* 20px */
--margbot-7: 1.25em;   /* 60px */
}

html {
}

body {
margin: 0;
padding: 0;
font-family: 'Noto Sans', Arial, sans-serif;
font-size: var(--fontsize-2);
line-height: var(--lineheight-4);
text-align: center;
color: var(--color-weiss);
background-color: var(--color-grau);
hyphens: auto;
}

body.nofade .fade {
opacity: 1 !important;
transform: translateY(0) !important;
}

h1.hlstart {
display: none;
}

h1.hlsub, h2 {
font-family: 'Roboto', Arial, sans-serif;
font-size: var(--fontsize-6);
line-height: var(--lineheight-2);
font-weight: 300;
margin: 0;
padding: 0;
margin-top: var(--margtop-5);
margin-bottom: var(--margbot-7);
color: var(--color-gelb);
}

h2.hlani {
font-family: 'Roboto', Arial, sans-serif;
font-size: var(--fontsize-7);
line-height: var(--lineheight-1);
font-weight: 700;
margin: 0;
padding: 0;
opacity: 0;
transition: opacity 0.5s ease;
}

h2.hlani.visible {
opacity: 1;
}

h2.hleyebrow {
margin-top: 0;
}

.h2zusatz {
font-size: 50%;
line-height: var(--lineheight-2);
margin-top: var(--margtop-2);
font-weight: 300;
display: block;
}

h2.hlteam, h3.hlteam {
font-size: var(--fontsize-5);
line-height: var(--lineheight-1);
color: var(--color-grau);
margin-top: 0;
}

h2.hlteam {
margin-bottom: 0;
}

h3 {
font-family: 'Roboto', Arial, sans-serif;
font-size: var(--fontsize-3);
line-height: var(--lineheight-2);
font-weight: 300;
margin: 0;
padding: 0;
margin-bottom: var(--margbot-6);
color: var(--color-gelb);
}

h3.hleyebrow {
margin-bottom: var(--margbot-5);
}

.hlglow h3 {
transition: text-shadow 0.3s ease-out;
text-shadow: none;
}

.hlglow.hlglowactive h3 {
opacity: 1;
text-shadow: 0 0 4px yellow, 0 0 8px gold, 0 0 15px gold, 0 0 30px gold, 0 0 50px orange;
}

h3.hlicons {
font-size: var(--fontsize-1);
line-height: var(--lineheight-2);
font-weight: 700;
margin-top: var(--margtop-3);
text-transform: uppercase;
}

h3.hlpakete {
font-size: var(--fontsize-5);
line-height: var(--lineheight-1);
color: var(--color-grau);
font-weight: 700;
hyphens: none;
}

h3.hlref, .hlref {
font-family: 'Noto Serif', Arial, sans-serif;
font-size: var(--fontsize-4);
line-height: var(--lineheight-2);
color: var(--color-white);
text-align: left;
}

h3.hltab {
margin-top: var(--margtop-3);
}

h3.hlfaq {
margin-top: var(--margtop-3);
margin-bottom: var(--margtop-4);
}

h3.hlteamaufgabe {
font-size: var(--fontsize-2);
line-height: var(--lineheight-1);
color: var(--color-grau);
margin-top: var(--margtop-2);
}

img {
border: none;
display: block;
}

.imgsize {
max-width: 100%;
height: auto;
}

.imgsizemax {
width: 100%;
height: auto;
}

.imgcenter {
margin-left: auto;
margin-right: auto;
}

.imgdesktop {
display: none;
}

.imgborderleft {
border-top-left-radius: 1.5em;
}

.imgborderright {
border-top-right-radius: 1.5em;
}

input, textarea {
font-family: 'Noto Sans', Sans-Serif;
font-size: 100%;
color: var(--color-grau);
border: var(--color-gelb);
padding: 10px 20px;
box-sizing: border-box;
width: 100%;
margin-bottom: var(--margbot-5);
background-color: var(--color-weiss);
transition: all .2s ease-out;
}

input[type='checkbox'] {
padding: 0;
margin: 0;
width: 20px;
cursor: pointer;
}

input:hover, textarea:hover {
background-color: var(--color-gelb);
}

.formoption {
margin: 3em 0;
}

.formoption .formoptioneinzel {
display: block;
background-color: var(--color-weiss);
padding: 15px 25px;
text-decoration: none;
transition: all .3s ease-out;
color: var(--color-grau);
font-weight: 300;
border-radius: 10px;
line-height: 1.4em;
cursor: pointer;
margin-bottom: var(--margbot-2);
}

.formoption .formoptioneinzel input[type="radio"] {
display: none;
}

.formoption .formoptioneinzel:hover, .formoption .formoptioneinzel:has(input:checked) {
background-color: var(--color-gelb);
}

.formoption .formoptioneinzel:has(input:checked) {
font-weight: 700;
text-decoration: none;
transform: scale(1.02);
}

a {
color: var(--color-gelb);
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a.anchor {
position: relative;
top: -10px;
padding: 0;
}

ul.liste, ul.liste2 {
list-style: none;
padding: 0;
margin: 0;
}

ul.liste li, ul.liste2 li {
position: relative;
padding-left: 1.8em;
margin-bottom: var(--margbot-2);
}

ul.liste li::before {
content: "\f14a";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
top: 0.1em;
}

ul.liste2 li::before {
content: "\f00c";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
top: 0.1em;
color: var(--color-blau);
}

ul.liste2 li:last-child::before {
content: "";
}

.wehinweis, .formsubject, .hidden {
display: none;
}

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

.kraeuselwrapper {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}

#kraeusel {
max-width: 60%;
width: 100%;
height: auto;
display: block;
}

svg#kraeusel {
width: 100%;
height: auto;
display: block;
aspect-ratio: 3 / 2;
overflow: visible;
}

svg#kraeusel path {
fill: none;
stroke: var(--color-blau);
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 2;
transform: scale(1.1);
transform-origin: center;
}

.bgsvgwrapper {
position: fixed;
top: 50vh;
left: 0;
width: 100vw;
height: 8000px;
pointer-events: none;
overflow: hidden;
visibility: hidden;
}

svg.bgsvg {
width: 100vw;
height: 8000px;
display: block;
overflow: hidden;
}

svg.bgsvg path {
fill: none;
stroke: var(--color-blau);
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.15;
}

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

#sticky {
position: relative;
height: 100vh;
}

#stickycontainer {
position: sticky;
top: 15vh;
max-width: 100%;
max-height: 60vh;
aspect-ratio: 1 / 1;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}

.bausteinewrapper {
position: relative;
width: 100%;
height: 100%;
}

.bausteinetablet, .bausteinetabletglow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}

.bausteinetabletglow {
z-index: 3;
opacity: 0.2;
margin-left: -7%;
}

.bausteineeinzel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.5s linear, opacity 0.5s linear;
pointer-events: none;
z-index: 2;
}

.bausteinetablet, .bausteinetabletglow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
}

#bausteineeinzel1 {
width: 22%;
left: 40%;
top: 4%;
transform: translate(-50%, -50%);
}

#bausteineeinzel2 {
width: 30%;
left: 36%;
top: 17%;
transform: translate(-50%, -50%);
}

#bausteineeinzel3 {
width: 42%;
left: 30%;
top: 36%;
transform: translate(-50%, -50%);
}

#bausteineeinzel4 {
width: 18%;
left: 43%;
top: 76%;
transform: translate(-50%, -50%);
}

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

.sliderimgwrapper {
position: relative;
overflow: hidden;
}

.sliderimages {
display: flex;
transition: transform 0.8s ease;
height: 100%;
}

.sliderimageseinzel {
min-width: 100%;
height: 100%;
}

.sliderimageseinzel img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.sliderbtn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0,0,0,0.1);
color: #FFFFFF;
border: none;
padding: 0 10px 5px 10px;
box-sizing: border-box;
font-size: var(--fontsize-4);
cursor: pointer;
z-index: 10;
transition: all .2s ease-out;
}

.prev {
left: 0;
}

.next {
right: 0;
}

.sliderbtn:hover {
background-color: rgba(0,0,0,0.4);
}

.slidertextwrapper {
overflow: hidden;
}

.slidertexte {
display: flex;
transition: transform 0.8s ease;
}

.slidertexteeinzel {
min-width: 100%;
box-sizing: border-box;
padding: 15px 10px;
text-align: center;
}

.sliderpanel {
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: 85vw;
height: 100%;
background-color: var(--color-grau);
font-size: var(--fontsize-2);
line-height: var(--lineheight-4);
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
z-index: 1000;
}

.sliderpanelopenbtn, .sliderpanelclosebtn {
border: none;
background: none;
cursor: pointer;
color: var(--color-weiss);
font-size: 100%;
font-family: 'Noto Sans', Arial, sans-serif;
}

.sliderpanelopenbtn {
margin-top: 10px;
}

.sliderpanelclosebtn {
margin-bottom: var(--margbot-2);
}

.sliderpanelopenbtn:hover {
color: var(--color-gelb);
}

.sliderpanel[open], .sliderpanel.open {
transform: translateX(0);
}

.sliderpanelcontent {
padding: 1.4em;
box-sizing: border-box;
overflow-y: auto;
height: 100%;
}

body.sliderpanelactive::before {
content: '';
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
z-index: 999;
}

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

#container, #containereng, #containerweit {
margin: 0em auto;
width: 85%;
text-align: left;
}

.fade {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.6s ease-out 0.3s, transform 0.6s ease-out 0.3s;
}

.fade.visible {
opacity: 1;
transform: translateY(0);
}

@media print {
.fade {
opacity: 1 !important;
transform: translateY(0) !important;
}
}

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

#navi {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 10;
width: 30px;
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}

#navi.active {
opacity: 1;
pointer-events: auto;
}

#navi label {
cursor: pointer;
}

.navicontent {
position: fixed;
bottom: 4.5rem;
right: 20px;
background-color: var(--color-gelb);
padding: 1em;
box-sizing: border-box;
border-radius: 10px;
opacity: 0;
transform: scale(0.8);
visibility: hidden;
pointer-events: none;
transition:
opacity 0.4s ease,
transform 0.4s ease,
visibility 0s linear 0.4s;
}

.navicontent a {
color: var(--color-grau);
display: block;
}

#navitoggle:checked ~ .navicontent {
opacity: 1;
transform: scale(1);
visibility: visible;
pointer-events: auto;
transition:
opacity 0.4s ease,
transform 0.4s cubic-bezier(.34,1.56,.64,1),
visibility 0s linear 0s;
}

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

.margtop, .margtop2 {
margin-top: var(--margtop-3);
}

.blau {
color: var(--color-blau);
}

.gelb {
color: var(--color-gelb);
}

#btn {
margin-top: var(--margtop-2);
text-align: right;
}

#btnpreis {
margin-top: 10px;
text-align: right;
}

.btn {
text-align: left;
display: inline-block;
background-color: var(--color-gelb);
padding: 5px 15px;
text-decoration: none;
transition: all .3s ease-out;
color: var(--color-grau);
font-weight: 700;
border-radius: 10px;
font-size: 100%;
line-height: var(--lineheight-3);
border: none;
cursor: pointer;
}

.btn:hover {
text-decoration: none;
transform: scale(1.15);
}

#preisgesamt {
text-align: right;
}

#preis {
font-size: var(--fontsize-4);
}

.preiseuro {
font-size: 70%;
line-height: var(--lineheight-4);
}

.produktauszeichnung {
position: relative;
}

#produktauszeichnung {
position: absolute;
top: 20px;
right: -36px;
width: 140px;
height: 28px;
background-color: var(--color-blau);
color: var(--color-gelb);
text-align: center;
line-height: 28px;
clip-path: polygon(
0% 0%,
80% 0%,
100% 100%,
80% 100%,
0% 100%,
20% 0%
);

transform: rotate(45deg);
z-index: 2;
}

.imgpos {
position: relative;
}

.imgpostext {
position: absolute;
bottom: 1.2em;
left: 1.2em;
background-color: rgba(0,0,0,0.4);
padding: 5px 10px;
font-size: var(--fontsize-1);
line-height: var(--lineheight-2);
}

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

#teambild {
position: relative;
}

#teambild img.background {
width: 100%;
height: auto;
display: block;
}

.teambildicon {
position: absolute;
width: 6vw;
animation: none;
opacity: 0;
}

.teambildicon.teamiconanimate {
animation: teamiconani 1.4s ease-out 0.8s forwards;
}

.teambildicon.teamiconanimate2.teambildicontemplate {
animation: teamiconani21 1s cubic-bezier(.5,.8,.3,.7) infinite;
opacity: 1;
transform: translateY(0) rotate(var(--flutter-rotate));
}

.teambildicon.teamiconanimate2.teambildiconfotografie {
animation: teamiconani22 1s cubic-bezier(.5,.8,.3,.7) infinite;
opacity: 1;
transform: translateY(0) rotate(var(--flutter-rotate));
}

.teambildicon.teamiconanimate2.teambildicondesign {
animation: teamiconani23 1s cubic-bezier(.5,.8,.3,.7) infinite;
opacity: 1;
transform: translateY(0) rotate(var(--flutter-rotate));
}

.teambildicon.teamiconanimate2.teambildicontext {
animation: teamiconani24 1s cubic-bezier(.5,.8,.3,.7) infinite;
opacity: 1;
transform: translateY(0) rotate(var(--flutter-rotate));
}

.teambildicontemplate {
top: 68%;
left: 29%;
animation-delay: 0.2s;
}

.teambildiconfotografie {
top: 56%;
left: 40%;
animation-delay: 0.6s;
}

.teambildicondesign {
top: 64%;
left: 52%;
animation-delay: 0.4s;
}

.teambildicontext {
top: 60%;
left: 66%;
animation-delay: 0.8s;
}

@keyframes teamiconani {
0% { opacity: 0; transform: translateY(100px) scale(0.8); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes teamiconani21 {
0%, 100% { --flutter-rotate: 0deg; }
25% { --flutter-rotate: 1deg; }
50% { --flutter-rotate: -1deg; }
75% { --flutter-rotate: 1deg; }
}

@keyframes teamiconani22 {
0%, 100% { --flutter-rotate: 0deg; }
20% { --flutter-rotate: 1.2deg; }
40% { --flutter-rotate: -1.2deg; }
60% { --flutter-rotate: 1.2deg; }
80% { --flutter-rotate: -0.6deg; }
}

@keyframes teamiconani23 {
0%, 100% { --flutter-rotate: 0deg; }
15% { --flutter-rotate: 0.8deg; }
45% { --flutter-rotate: -0.8deg; }
75% { --flutter-rotate: 0.8deg; }
}

@keyframes teamiconani24 {
0%, 100% { --flutter-rotate: 0deg; }
10% { --flutter-rotate: 1.5deg; }
30% { --flutter-rotate: -1.5deg; }
50% { --flutter-rotate: 1.5deg; }
70% { --flutter-rotate: -1deg; }
90% { --flutter-rotate: 1deg; }
}

.teamuebericon {
position: absolute;
bottom: 20px;
right: 20px;
width: 20%;
}

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

#sociallinks a {
font-size: 150%;
margin-right: 10px;
color: var(--color-grau);
transition: all .2s ease-out;
}

#sociallinks a:hover {
color: var(--color-gelb);
}

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

.acc-title {
cursor: pointer;
display: inline-block;
transition: all .2s ease-out;
border-bottom: 2px solid var(--color-weiss);
}

.acc-titlefaq {
display: block;
position: relative;
padding-right: 25px;
}

.acc-title:hover {
border-bottom: 2px solid var(--color-blau);
}

.acc-titlefaq:hover {
border-bottom: 2px solid var(--color-gelb);
}

.acc-titlefaq h3 {
margin: 0;
padding: 10px 0;
}

.acc-input + .acc-title + .acc-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}

input.acc-input[type="checkbox"] {
display: none;
}

.acc-content {
max-height: 0px;
overflow: hidden;
transition: all 0.2s ease-out;
}

.acc-contentfaq {
margin-top: var(--margtop-2);
margin-bottom: var(--margbot-3);
}

.acc-content ul {
padding: 0;
margin: 0;
}

.acc-content ul li {
padding-left: 1.2em;
margin-bottom: var(--margbot-1);
}

.acc-content ul li::before {
content: "\f0da";
color: var(--color-grau);
}

.acc-content ul li:last-child::before {
content: "\f0da";
}

.acc-titlefaq::after {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\2b"; 
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s ease;
}

.acc-input:checked + .acc-titlefaq::after {
transform: translateY(-50%) rotate(-45deg);
}

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

#tabheader {
display: -ms-grid;
display: grid;
grid-template-columns: 2fr 3fr;
gap: 1vw;
}

#tabheader > div:nth-child(2n + 1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
position: relative;
}

#tabheader > div:nth-child(2n + 1) img {
position: absolute;
top: 0; 
left: 0;
}

#tabheader > div:nth-child(2n + 2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}

#tabzweier {
display: -ms-grid;
display: grid;
gap: 2vw;
}

#tabzweierwide, #tabzweierwide2 {
display: grid;
}

.tabzweierwidegap {
gap: 1vw;
}

#tabzweier > div:nth-child(2n + 1), #tabzweierwide > div:nth-child(2n + 1), #tabzweierwide2 > div:nth-child(2n + 1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}

#tabzweier > div:nth-child(2n + 2), #tabzweierwide > div:nth-child(2n + 2), #tabzweierwide2 > div:nth-child(2n + 2) {
-ms-grid-column: 1;
-ms-grid-row: 2;
}

#tabzweiericon {
text-align: center;
margin-bottom: var(--margbot-6);
}

#tabzweiericon img {
width: 50%;
}

#tabdreier {
display: grid;
gap: 2vw;
}

#tabdreier > div:nth-child(3n + 1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}

#tabdreier > div:nth-child(3n + 2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}

#tabdreier > div:nth-child(3n + 3) {
-ms-grid-column: 3;
-ms-grid-row: 1;
}

#tabfuenfer {
display: grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 2vw;
text-align: center;
}

#tabfuenfer > div:nth-child(5n + 1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}

#tabfuenfer > div:nth-child(5n + 2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}

#tabfuenfer > div:nth-child(5n + 3) {
-ms-grid-column: 3;
-ms-grid-row: 1;
}

#tabfuenfer > div:nth-child(5n + 4) {
-ms-grid-column: 4;
-ms-grid-row: 1;
}

#tabfuenfer > div:nth-child(5n + 5) {
-ms-grid-column: 5;
-ms-grid-row: 1;
}

#tabref {
display: grid;
-ms-grid-columns: auto 1fr;
grid-template-columns: auto 1fr;
}

#tabref > div:nth-child(2n + 1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}

#tabref > div:nth-child(2n + 2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}

.tabbg {
color: var(--color-grau);
background-color: var(--color-weiss);
padding: 1em;
box-sizing: border-box;
}

.tabborder {
border-radius: 10px;
}

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

footer {
color: var(--color-grau);
background-color: var(--color-weiss);
padding: 40px 0;
font-size: 80%;
}

footer #container {
text-align: center;
}

footer a {
display: block;
color: var(--color-grau);
}

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

@media screen and (min-width : 1200px), print {
/**************************************************************************************/

:root {
--fontsize-1: 0.7vw;
--fontsize-2: 1.2vw;
--fontsize-3: 1.5vw;
--fontsize-4: 2.0vw;
--fontsize-5: 3.0vw;
--fontsize-6: 3.5vw;
--fontsize-7: 7.0vw;
--lineheight-1: 1.0em;
--lineheight-2: 1.2em;
--lineheight-3: 1.4em;
--lineheight-4: 1.5em;
}

h1.hlsub {
margin-top: var(--margtop-2);
margin-bottom: var(--margbot-5);
}

h2.hlani {
line-height: var(--lineheight-1);
}

h3.hlteam {
margin-bottom: var(--margbot-2);
}

h3.hlteamaufgabe {
font-size: var(--fontsize-3);
line-height: var(--lineheight-1);
}

h3.hlicons {
font-size: var(--fontsize-2);
}

h3.hltab {
margin-top: 0;
}

.imgmobile {
display: none;
}

.imgdesktop {
display: block;
}

.imgborderright {
border-bottom-right-radius: 1.5em;
}

.formoption .formoptioneinzel {
display: inline-block;
margin-bottom: 0;
margin-right: 1.5em;
}

.formoption .formoptioneinzel:has(input:checked) {
transform: scale(1.15);
}

#container {
margin: 0em auto;
width: 1200px;
}

#containereng {
margin: 0em auto;
width: 1000px;
}

.margtop, #btn {
margin-top: var(--margtop-4);
}

.sliderpanel {
max-width: 40vw;
}

.sliderpanelcontent {
padding: 2em;
}

#stickycontainer {
max-width: 90vw;
max-height: 70vh;
aspect-ratio: 2 / 1;
}

.bausteinetabletglow {
margin-left: -3%;
}

#bausteineeinzel1 {
width: 12%;
left: 44%;
top: 4%;
}

#bausteineeinzel2 {
width: 14%;
left: 44%;
top: 20%;
}

#bausteineeinzel3 {
width: 21%;
left: 40%;
top: 36%;
}

#bausteineeinzel4 {
width: 8%;
left: 47%;
top: 78%;
}

#tabheader {
grid-template-columns: 1fr 3fr;
gap: 3vw;
}

#tabzweier {
grid-template-columns: 1fr 1fr;
}

#tabzweierwide {
grid-template-columns: 5fr 3fr;
}

#tabzweierwide2 {
grid-template-columns: 3fr 5fr;
}

#tabzweier > div:nth-child(2n + 2), #tabzweierwide > div:nth-child(2n + 2), #tabzweierwide2 > div:nth-child(2n + 2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}

#tabdreier {
grid-template-columns: 1fr 1fr 1fr;
}

#tabdreier > div:nth-child(3n + 1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}

#tabdreier > div:nth-child(3n + 2) {
-ms-grid-column: 1;
-ms-grid-row: 2;
}

#tabdreier > div:nth-child(3n + 3) {
-ms-grid-column: 1;
-ms-grid-row: 3;
}

.tabbg {
padding: 2em;
}

.taborder2 {
order: 2;
}

.taborder1 {
order: 1;
}

.tabzweierwideeinzelueber {
margin-top: var(--margtop-5);
}

footer #container {
text-align: left;
}

footer a {
display: inline-block;
margin-left: 3em;
}

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

@media (min-width : 1500px) {
/**************************************************************************************/

#containerweit {
margin: 0em auto;
width: 1500px;
}

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

@media (min-width : 2000px) {
/**************************************************************************************/

:root {
--fontsize-1: 0.6vw;
--fontsize-2: 1.0vw;
--fontsize-3: 1.3vw;
--fontsize-4: 1.7vw;
--fontsize-5: 2.4vw;
--fontsize-6: 2.8vw;
--fontsize-7: 6.0vw;
--lineheight-1: 1.0em;
--lineheight-2: 1.2em;
--lineheight-3: 1.4em;
--lineheight-4: 1.5em;
}

#container {
width: 1600px;
}

#containereng {
width: 1400px;
}

#containerweit {
width: 1800px;
}

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