/* Template for Glaronia Informatik AG © admotion */

:root {
    --hellgrau: #f2f2f2;
    --mittelgrau: #e1e1e1;
    --grau: #474947;
    --ganzhellblau: #edf8fc;
    --hellblau: #88CCEA;
    --blau: #0055a3;
    --pink: #bc007e;
}

html 
{
   height:			100%;
}


body
{
    height:         auto;
    margin:			0px;
    padding:		0px;
    font-family:	'Blinker';
    font-weight:	300;
    font-size:		18px;
    line-height:	    150%;
    letter-spacing:	    0.03em;
    color:              var(--grau);
}




#system-message { margin: 0px; }
img { height: auto; max-width: 100%; vertical-align: middle; border: 0px; }



header { position: fixed; width: 100%; background: #ffffff; z-index: 9998; box-shadow: 1px 0px 20px 0px rgba(0,0,0,0.2); }
#header { display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; padding: 30px 20px 30px 20px; transition: .3s ease-out; }

#logo { width: 250px; transition: .3s ease-out; }
#logo p { margin: 0px; }

.shrink #logo { width: 200px; }
.shrink #header { padding: 20px 20px; }

#container-menu { display: none; position: fixed; z-index: 9999; background: #ffffff; top: 110px; left: 0; right: 0; }
.shrink #container-menu { top: 80px; }

#menu { padding: 0px 20px 50px 20px; }

#icons-mobile { background: var(--blau); display: flex; flex-wrap: wrap; gap: 30px; padding: 23px 20px 15px 20px; }

#supportbutton a { background: #ffffff; padding: 5px 10px; color: var(--blau); font-weight: 600; font-size: 16px; border: 2px solid #ffffff; transition: .3s ease-out; }
#supportbutton:hover a { background: var(--blau); color: #ffffff; border: 2px solid #ffffff; }

#fernsupportbutton a { background: #ffffff; padding: 5px 10px; color: var(--blau); font-weight: 600; font-size: 16px; border: 2px solid #ffffff; transition: .3s ease-out; }
#fernsupportbutton:hover a { background: var(--blau); color: #ffffff; border: 2px solid #ffffff; }




#showbox { position: relative; padding: 100px 0px 0px 0px; }
#titelbild { height: 300px; position: relative; }
#titelbild img { position: absolute; object-fit: cover; width: 100%; height: 100%; }

#showbox::after { content: url(../images/spickel-ul.svg); position: absolute; bottom: -8px; z-index: 0; left: 0; right: 0; overflow: auto; transform: translateY(0%); margin: 0; }

.partner-uebersicht { display: grid; grid-template-columns: 1fr; column-gap: 30px; margin-top: 50px; row-gap: 20px; }
.partner img { border: 1px solid var(--grau); width: 100%; }


#icons { display: none; }
#email { padding: 3px 0px 0px 0px; }

.telefonicon { background: url(../images/telefon.svg) no-repeat scroll 0 0px; background-size: auto; background-size: 25px 28px; padding: 0px 0px 0px 40px; font-weight: 600; }
.emailicon { background: url(../images/email.svg) no-repeat scroll 0 8px; background-size: auto; background-size: 25px 17px; padding: 0px 0px 0px 40px; font-weight: 600; }




.newsflash-text img { width: 60px; }

#phone svg { width: 28px; }
#email svg { width: 28px; }

.st0 { fill: none; stroke: #ffffff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; transition: .3s ease-out; }
#phone:hover .st0 { stroke: var(--pink); }
#email:hover .st0 { stroke: var(--pink); }




.icon { width: 80px; margin-bottom: 20px; }
.pinkline { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px; stroke: var(--pink); }
.blueline { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px; stroke: var(--blau);}
.lightblueline { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px; stroke: var(--hellblau);}


.icon-vorteile { margin-bottom: 20px; }
.vorteile .pinkline,
.vorteile .blueline,
.vorteile .lightblueline { stroke-width: 4px; }


.vorteile .newsflash-text {
    display: flex;
    justify-content: space-between;
}

.icon-vorteile {
    margin-left: auto; /* Schiebt das Icon ganz nach rechts */
}







.items-leading .blog-item .item-content { padding: 20px 20px 40px 20px; }
.items-leading .inhalt { padding: 0px; }
.items-leading .item-image { width: 80px; margin-bottom: 30px; }



.inhalt { padding: 20px; }
.com-content-article__body { padding: 20px; }


.newsflash { margin-top: 50px; display: grid; grid-template-columns: 1fr; gap: 30px; }
.mod-articlesnews__item { background: #ffffff; padding: 30px; display: flex; flex-direction: row-reverse; gap: 20px; box-sizing: border-box; }
.newsflash-image { width: 35px; }

.newsflash-image { width: 40px; }
.newsflash-text { flex: 1; }




footer { background: var(--ganzhellblau); }

#container-vorteile { background: var(--hellgrau); position: relative; margin-bottom: 50px; }
#container-vorteile::before { content: ""; position: absolute; top: 0px; background: url(../images/spickel-or.svg) no-repeat scroll center top; height: 156px; z-index: 0; width: 100%; }
#container-vorteile::after { content: ""; position: absolute; bottom: -1px; background: url(../images/spickel-ur.svg) no-repeat scroll center bottom; height: 156px; z-index: 0; width: 100%; }


#vorteile { padding: 10px 20px 30px 20px; }
.vorteile .newsflash { display: grid; grid-template-columns: 1fr; gap: 20px; }
.vorteile .mod-articlesnews__item { box-shadow: 3px 1px 10px rgba(0,0,0,0.15); background: #ffffff; padding: 30px 30px 25px 30px; display: inherit; }
.vorteile .newsflash-image { width: 100%; text-align: right; }
.vorteile .newsflash-image img { width: 60px; }

.vorteile .newsflash-text { display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: column;}

.vorteile .icon-vorteile { width: 60px; display: flex; flex-wrap: wrap; justify-content: end; margin-top: auto; }


#lead { background: var(--pink); position: absolute; right: 0; bottom: 0; color: #ffffff; z-index: 9997; box-sizing: border-box; padding: 20px 30px; }
#lead::before { content: url(../images/spickel-ur-pink.svg); position: absolute; top: 8px; z-index: 0; left: 0; right: 0; overflow: auto; transform: translateY(-100%); margin: 0; }
#lead::after { content: url(../images/spickel-or-pink.svg); position: absolute; bottom: 1px; z-index: 0; left: 0; right: 0; overflow: auto; transform: translateY(100%); margin: 0; }

#lead .button { background: #ffffff; color: var(--pink); border: 2px solid #ffffff; margin-top: 0px; }
#lead .button:hover { background: var(--pink); color: #ffffff; }




.desktop { display: none; }

#container-more { background: var(--mittelgrau); position: relative; padding: 50px 0px 70px 0px; }
#container-more::before { content: url(../images/spickel-ol.svg); position: absolute; top: -1px; z-index: 0; left: 0; right: 0; overflow: auto; transform: translateY(0%); margin: 0; }



#more { background: var(--pink); color: #ffffff; position: relative; width: 90%; }
#more .moduletable { padding: 20px 20px; }
#more h3 { font-size: 30px; }

#more::before { content: url(../images/spickel-ul-pink.svg); position: absolute; top: 8px; z-index: 0; left: 0; right: 0; overflow: auto; transform: translateY(-100%); margin: 0; }
#more::after { content: url(../images/spickel-ol-pink.svg); position: absolute; bottom: 1px; z-index: 0; left: 0; right: 0; overflow: auto; transform: translateY(100%); margin: 0; }


#news { padding: 40px 30px 20px; background: #ffffff; }
#news h3 { font-size: 26px; color: var(--pink); }

#more .button { background: #ffffff; color: var(--pink); border: 2px solid #ffffff; }
#more .button:hover { background: var(--pink); color: #ffffff; }


.kontaktbox { background: var(--hellblau); padding: 30px 30px 25px 30px; margin-top: 20px; font-size: 24px; line-height: 150%; }


#container-ueberblick { background: url(../images/ueberblick.jpg) no-repeat scroll 20px 0; position: relative; padding: 50px 0px; margin-bottom: 30px; }


#container-ueberblick::before { content: url(../images/spickel-ol.svg); position: absolute; top: -1px; z-index: 0; left: 0; right: 0; overflow: auto; transform: translateY(0%); margin: 0; }
#container-ueberblick::after { content: url(../images/spickel-ul.svg); position: absolute; bottom: -8px; z-index: 0; left: 0; right: 0; overflow: auto; transform: translateY(0%); margin: 0; }


#ueberblick { padding: 20px 20px 20px 40px; }

#ueberblick p { color: #ffffff; }

#ueberblick .uk-margin p { color: var(--grau); }

#ueberblick h1 { color: #ffffff; }



footer { position: relative; }

#signet { display: none; }

#footer { padding: 40px 20px; display: grid; grid-template-columns: 1fr; gap: 50px; }
#footer ul { margin: 0px; padding: 0px; }
#footer li { margin: 0px; padding: 0px 0px 7px 0px; list-style: none; }
#footer li a { background: url(../images/list.svg) no-repeat scroll 0 6px; background-size: 10px 11px; padding: 0px 0px 0px 20px; color: var(--blau); transition: .3s ease-out; }
#footer li:hover a { color: var(--pink); background: url(../images/list-pink.svg) no-repeat scroll 0 6px; background-size: 10px 11px; }


#footerlogo { width: 250px; }
#kontakt { width: 220px; }
#kontakt ul:first-of-type { margin-bottom: 30px; }

#links { width: 220px; }

.socialmedia { display: flex; flex-wrap: wrap; gap: 30px; }
.linkedin { width: 30px; }
.instagram { width: 30px; padding: 2px 0px 0px 0px; }

.cls-1 { fill: var(--blau); transition: .3s ease-out; }
.cls-1:hover { fill: var(--pink); }


#container-bottom { background: var(--blau); color: rgb(255,255,255,.4); }
#container-bottom a { color: rgb(255,255,255,.4); transition: .3s ease-out; }
#bottom { padding: 15px 20px; font-size: 16px; }
#bottom p { margin: 0px; }
#copyright { margin-bottom: 5px; }



.buttons { display: grid; grid-template-columns: 1fr; column-gap: 20px; row-gap: 10px; margin-top: 20px; }
.buttons .button { display: block; margin-top: 0px; }

.button { background: var(--blau); color: #ffffff; padding: 7px 30px 8px 30px; display: inline-block; margin-top: 20px; font-weight: 600; border: 2px solid var(--blau); transition: .3s ease-out; }
.button:hover { background: #ffffff; color: var(--blau); }

.spitzmarke { color: var(--blau); text-transform: lowercase; font-size: 20px; margin-bottom: 30px; }

.lead { font-size: 24px; line-height: 140%; }


.back-to-top { font-size: 0; background: url(../images/totop.png) no-repeat scroll 0 0; background-size: 24px 15px; width: 24px; height: 15px; bottom: 20px; right: 15px; position: fixed; left: 50%; margin: 0px 0px 0px -12px; }



#ueberblick h1 { hyphens: auto; }

h1 { margin: 0px 0px 20px 0px; padding: 0px; font-size: 33px; line-height: 110%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } 
h2 { margin: 0px 0px 5px 0px; padding: 0px; font-size: 19px; line-height: 110%; font-weight: 700; letter-spacing: 0.03em; } 
h3 { margin: 0px 0px 15px 0px; padding: 0px; font-size: 22px; line-height: 130%; font-weight: 700; letter-spacing: 0.03em; } 
h4 { margin: 0px 0px 20px 0px; padding: 0px 0px 10px 0px; border-bottom: 2px solid var(--blau); text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; font-size: 23px; }


p + h2 { padding: 20px 0px 0px 0px; }



a { text-decoration: none; outline: none; color: var(--pink); }
a:hover { text-decoration: none; outline: none; }
a:focus { text-decoration: none; outline: none; }


p { margin: 0px 0px 10px 0px; }

.clear { line-height: 0; }

table { margin: 0px 0px 10px 0px; width: 100%; }

strong { font-weight: 600; }

figure { margin: 0px; padding: 0px; }



.wf-columns.standorte { display: block; }





@media(min-width:550px)
{
    #header { padding: 30px; }
    #menu { padding: 0px 30px 50px 30px; }
    #icons-mobile { padding: 23px 30px 15px 30px; }

    .shrink #header { padding: 20px 30px; }

    .items-leading .blog-item .item-content { padding: 20px 30px 50px 30px; }
    
    .inhalt { padding: 20px 30px; }
    .com-content-article__body { padding: 20px 30px; }

    .partner-uebersicht { grid-template-columns: 1fr 1fr; }

    #vorteile { padding: 20px 30px 60px 30px; }

    #container-ueberblick { background: url(../images/ueberblick.jpg) no-repeat scroll 30px 0; position: relative; padding: 50px 0px; }
    #ueberblick { padding: 30px 30px 30px 60px; }

    #container-more { padding: 50px 0px 100px 0px; }
    #more .moduletable { padding: 20px 30px; }

    #signet { display: block; position: absolute; right: 30px; top: -50px; width: 150px; }

    #footer { padding: 40px 30px; grid-template-columns: 1fr 1fr; }

    #footerlogo { width: calc(50% - 25px); }
    #footerlogo { grid-column: span 2; }
    #socialmedia { grid-column: span 2; }


    #kontakt { width: 100%; }
    #links { width: 100%; }

    #bottom { padding: 15px 30px; }

    h1 { font-size: 40px; } 
    h3 { font-size: 25px; } 
}







@media(min-width:800px)
{
    #icons { position: absolute; right: 95px; top: 45px; display: flex; flex-wrap: wrap; gap: 20px; transition: .3s ease-out; }
    #icons-mobile { display: none; }
    .st0 { stroke: var(--blau); }
    #phone:hover .st0 { stroke: var(--pink); }
    #email:hover .st0 { stroke: var(--pink); }

    #news { padding: 30px 50px 20px; }

    .icon { width: auto; margin-bottom: 0px; }
    .pinkline { stroke-width: 2px; }
    .blueline { stroke-width: 2px; }
    .lightblueline { stroke-width: 2px; }
    
    #supportbutton { margin-left: 10px; }
    #supportbutton a { background: var(--pink); color: #ffffff; border: 2px solid var(--pink); }
    #supportbutton:hover a { background: #ffffff; color: var(--pink); border: 2px solid var(--pink); }

    #fernsupportbutton a { background: var(--blau); color: #ffffff; border: 2px solid var(--blau); }
    #fernsupportbutton:hover a { background: #ffffff; color: var(--blau); border: 2px solid var(--blau); }

    .shrink #icons { top: 27px; }

    #showbox { padding: 115px 0px 0px 0px; }
    #titelbild { height: auto; }
    #titelbild img { position: static; object-fit: cover; width: 100%; height: 100%; }
    #lead { padding: 30px; }

    

    .inhalt { margin: 0px auto; width: 700px; padding: 10px 0px 50px 0px; flex: 1; }
    .com-content-article__body { margin: 0px auto; width: 700px; padding: 50px 0px; }
      
    .newsflash { grid-template-columns: 1fr 1fr; gap: 50px; }

    .blog-item { display: flex; flex-wrap: wrap; }
    .item-image { width: 150px; }
    .blog-item { margin: 0px auto; width: 700px; padding: 20px 0px 50px 0px; }

    .items-leading .blog-item .item-content { display: grid; grid-template-columns: 120px 1fr; gap: 50px; padding: 20px 0px 50px 0px; }
    .items-leading .item-image { padding: 0px; width: auto; }
    .items-leading .inhalt { margin: 0px; padding: 0px; width: auto; }

    #container-vorteile { margin-bottom: 100px; }

    #container-vorteile::before { content: ""; position: absolute; top: -5px; background: url(../images/spickel-or.svg) no-repeat scroll center top; height: 156px; z-index: 0; width: 100%; }
    #container-vorteile::after { content: ""; position: absolute; bottom: -1px; background: url(../images/spickel-ur.svg) no-repeat scroll center bottom; height: 156px; z-index: 0; width: 100%; }
    #vorteile { margin: 0px auto; width: 700px; padding: 0px; position: relative; z-index: 999; }
    .vorteile .newsflash { grid-template-columns: 1fr 1fr; }

    #container-ueberblick { background: url(../images/ueberblick.jpg) no-repeat scroll 100px 0; position: relative; padding: 50px 0px; }
    #ueberblick { margin: 0px auto; width: auto; padding: 50px 50px 50px 150px; }

    #container-more { padding: 100px 0px; }
    #more { width: 75%; }

    #signet { right: 50px; top: -90px; width: 190px; }

    #footer { margin: 0px auto; width: 700px; padding: 70px 0px 60px 0px; }

    #bottom { margin: 0px auto; width: 700px; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 15px 0px; }
    #copyright { margin-bottom: 0px; }

    h1 { font-size: 50px; } 
}






@media(min-width:1100px)
{
    #header { padding: 30px 50px 30px 50px; }
    #icons { right: 125px; }

    #menu { padding: 0px 50px 50px 50px; }

    /* #showbox { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } */
    .shrink #header { padding: 25px 50px; }
    .shrink #logo { width: 200px; }
    .shrink #menu { top: 5px; }
    .shrink #icons { top: 33px; }

    #lead { width: 550px; padding: 30px 50px; }
    .desktop { display: block; }
    #lead .button { margin-top: 20px; }

    #news { position: absolute; left: 0; bottom: 100px; color: #000000; z-index: 9997; box-sizing: border-box; padding: 20px 30px; width: 500px; }
    #news::before { content: url(../images/spickel-ul.svg); position: absolute; top: 10px; z-index: 0; left: 0; right: 0; overflow: auto; transform: translateY(-100%); margin: 0; }
    #news::after { content: url(../images/spickel-ol.svg); position: absolute; bottom: 1px; z-index: 0; left: 0; right: 0; overflow: auto; transform: translateY(100%); margin: 0; }
    

    .small { width: 60%; }
    #ueberblick h1 { width: 60%; }

    .items-leading .blog-item .item-content { grid-template-columns: 200px 1fr; gap: 100px; padding: 20px 0px 80px 0px; }

    .partner-uebersicht { grid-template-columns: 1fr 1fr; }

    .inhalt { width: 1000px; }
    .com-content-article__body { width: 1000px; }
    .blog-item { width: 1000px; }

    #vorteile { width: 1000px; }

    #ueberblick { padding: 30px 100px 30px 200px; }
    #container-ueberblick { background: url(../images/ueberblick.jpg) no-repeat scroll 100px 0; padding: 100px 0px; }

    #container-more { padding: 100px 0px; }
    #more .moduletable { padding: 40px 100px; }
    #more h3 { font-size: 40px; }

    #footer { width: 1000px; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 100px 0px 90px 0px; }
    #socialmedia { width: 110px; display: flex; flex-wrap: wrap; align-items: end; padding-bottom: 10px; }

    #footerlogo { width: 280px; padding: 7px 0px 0px 0px; }

    #kontakt { width: 220px; }
    #links { width: 220px; }

    #bottom { width: 1000px; }

    h1 { font-size: 60px; } 
}



@media(min-width:1400px)
{
    .inhalt { width: 1300px; padding: 0px 0px 70px 0px; }
    .com-content-article__body { width: 1300px; padding: 70px 0px; }
    .blog-item { width: 1300px; padding: 40px 0px 70px 0px; }

    .items-leading .blog-item .item-content { grid-template-columns: 250px 600px; gap: 150px; }

    #vorteile { width: 1300px; }
    .vorteile .newsflash { grid-template-columns: 1fr 1fr 1fr 1fr; }
    #news { bottom: 200px; }

    #news { bottom: 150px; width: 800px; font-size: 24px; line-height: 150%; }

    #news h3 { font-size: 38px; }

    #container-ueberblick { background: url(../images/ueberblick.jpg) no-repeat scroll 100px 0; padding: 150px 0px 150px 0px; }
    #container-vorteile { padding: 30px 0px 80px 0px; }

    #container-more { padding: 150px 0px; }
    #more .moduletable { padding: 40px 100px; }

    #footer { width: 1300px; }
    #footerlogo { width: 350px; }
    #bottom { width: 1300px; }

    .socialmedia { gap: 50px; }

    .buttons { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 10px; margin-top: 20px; }

    .wf-columns.standorte { display: flex; }
}



@media(min-width:1600px)
{
    #header { align-items: end; padding: 55px 80px; }
    #icons { right: 80px; top: 25px; }
    #menu { top: 72px; padding: 0px; }

    #container-menu { display: block; position: static; }
    #menu-small { display: none; }
    #menu { position: fixed; right: 50px; z-index: 9999; transition: .3s ease-out; }
}



@media(min-width:1700px)
{
    #logo { width: 350px; }
    #menu { top: 82px; }

    #showbox { padding: 180px 0px 0px 0px; }

    .inhalt { width: 1600px; }
    .com-content-article__body { width: 1600px; }
    .blog-item { width: 1600px; }

    .items-leading .blog-item .item-content { grid-template-columns: 250px 700px; }

    #news { bottom: 200px; width: 1000px; padding: 20px 50px; }
    #signet { right: 100px; width: 220px; }

    #container-more { padding: 150px 0px; }
    #more { width: 50%; }
    #more .moduletable { padding: 20px 50px 20px 100px; }

    #vorteile { width: 1600px; }

    #ueberblick { width: 1400px; padding: 50px 0px; }

    #footer { width: 1600px; }

    #bottom { width: 1600px; }
}



@media(min-width:2000px)
{
    #ueberblick { width: 1600px; padding: 50px 0px; }
}