/*
Theme Name: Desk
Display Name: DESK
Description: A simple theme witch creates a desk/intranet like environment.
Version: 1.0
Author: MOLECO GmbH
*/

/* Path: style.css */


/* Colors: */
:root{
    --primary-color: #45b4e3;
    --secondary-color: #f5f5f5;
    --text-color: #3A3A3A;
    --text-color-light: #ffffff;
    --background-color-primary: #45b4e3;
    --background-color-secondary: #f5f5f5;
    --orange: #F6AA42;
    --shadow: 0 0 10px 0 rgba(0,0,0,0.2);
}


/* Grid: */
.container-flex{ display: flex;flex-wrap: wrap;justify-content: space-between;gap: 15px;}

.col{display: flex;flex-direction: column;height: 100%;position: relative;}
.row{display: flex;flex-direction: row;}

.col-10{flex: 0 0 10%;}
.col-20{flex: 0 0 20%;}
.col-30{flex: 0 0 30%;}
.col-40{flex: 0 0 40%;}
.col-50{flex: 0 0 50%;}
.col-60{flex: 0 0 60%;}
.col-70{flex: 0 0 70%;}
.col-80{flex: 0 0 80%;}
.col-90{flex: 0 0 90%;}
.col-100{flex: 0 0 100%;}
.col-auto{flex: 0 0 auto;}

.row-grow{flex: 1 1 auto;max-height: 100vh;}

.container-grid{display: grid;place-items:  center;gap:15px;}
.grid-item{padding: 0 30px;}

/* General: */
body,html,*{font-family: 'Montserrat';}
body{all:unset}
textarea, p, a, img, .text, .handlungs_bedarf_text, .head_container .btn-prim, .head_container .url-input, .red, .green, input{font-family:'Montserrat';line-height: 1.3;}
.subline{color: #F6AA42;display: block;margin-bottom: 15px;font-family:Gantari;font-weight: 600;}
.headline, .unter_headline{font-weight: 600;font-family:Gantari;}
.main-container .step .unter_headline.big{font-size: 1.5rem !important;}
.vh-100{height: 100vh;overflow-y: hidden;}
.vw-100{width: 100vw;overflow-x: hidden;}

.bg-ligth{background-color: #85bff2;color: var(--text-color);}
.bg-prim{background-color: var(--background-color-primary);}
.bg-sec{background-color: var(--background-color-secondary);}

.c-prim{color: var(--text-color);}
.c-sec{color: var(--text-color-light);}

.center{justify-content: center;align-items: center;}
.h-center{justify-content: center;}
.v-center{align-items: center;}

.content{width: 100%;max-height: 100vh;overflow-y: scroll;}

#content-display{width: 100%;}

#display_item{width: 100%;height: 100%;display: flex;flex-direction: column;}

.popup{position: fixed;top: 50%;width: 80%;min-width: 500px;max-width: 1500px;height: 60%;min-height: 300px;max-height: 800px;display: none;z-index: 999;left: 50%;transform: translate(-50%,-50%);overflow: scroll;}
.popup > div{width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: space-between;position: relative;border-radius: 15px;}
.popup .row.row-grow{background:#fff;-webkit-box-shadow: 0px 0px 25px -10px #000000;box-shadow: 0px 0px 25px -10px #000000;border-radius: 15px;}
.popup input, .popup textarea{background:var(--background-color-secondary);padding:5px 15px;border:none;margin-bottom:20px;}
.popup .user-information .info-field label{gap:5px;}
.popup .close-button{all: unset;}
.popup .close-button{position: absolute;top: 0;right: 0;padding:5px;cursor: pointer;border-radius: 15px;}
.popup .close-button img{width: 40px;height: 40px;}
.popup-container.active::after{content: '';position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0,0,0,0.5);z-index: 998;}

/* Text: */
.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}

/* Textarea: */
/*textarea{resize: none;}*/

/* Buttons: */
.btn{all: unset;}
.btn,input[type="submit"]{display: inline-block;padding: 10px 20px;border-radius: 5px;cursor: pointer;transition: all 0.2s ease-in-out;background-color: var(--background-color-primary);color: var(--text-color-light);width: max-content;}
.btn:hover,input[type="submit"]:hover{transform: scale(1.05);}
.btn:active,input[type="submit"]:active{transform: scale(0.95);}

input[type="submit"][title]:hover::after{content: attr(title);position: absolute;top: 110%;left: 50%;transform: translateX(-50%);padding: 5px 10px;background-color: var(--background-color-primary);color: var(--text-color-light);border-radius: 5px;white-space: nowrap;transition: all 0.2s ease-in-out;}
button[title]:hover::after{content: attr(title);position: absolute;top: 110%;left: 50%;transform: translateX(-50%);padding: 5px 10px;background-color: var(--background-color-primary);color: var(--text-color-light);border-radius: 5px;white-space: nowrap;transition: all 0.2s ease-in-out;}
img[title]:hover::after{content: attr(title);position: absolute;top: 110%;left: 50%;transform: translateX(-50%);padding: 5px 10px;background-color: var(--background-color-primary);color: var(--text-color-light);border-radius: 5px;white-space: nowrap;transition: all 0.2s ease-in-out;}

.btn-primary{background-color: var(--primary-color);color: var(--text-color-light);}
.btn-primary:hover{background-color: var(--secondary-color);color: var(--primary-color);}
.btn-primary:active{background-color: var(--primary-color);color: var(--text-color-light);}

.btn-secondary{background-color: var(--secondary-color);color: var(--primary-color);}
.btn-secondary:hover{background-color: var(--primary-color);color: var(--text-color-light);}
.btn-secondary:active{background-color: var(--secondary-color);color: var(--primary-color);}

/* Links: */
a{color: var(--text-color);text-decoration: none;}
a:hover{color: var(--primary-color);cursor: pointer;}
a.prim{color: var(--text-color);text-decoration: none;}
a.prim:hover{color: var(--primary-color);cursor: pointer;}
a.sec{color: var(--text-color);text-decoration: none;}
a.sec:hover{color: var(--primary-color);cursor: pointer;}

a.color-link{color: var(--text-color-light);text-decoration: none;}
a.color-link:hover{color: var(--text-color-light);cursor: pointer;}

/* Errors: */
.error-msg{background-color: #db0000;color: #ffffff;display: inline-block;margin-bottom: 1.5rem;border-radius: 5px;}
.error-msg p{margin: 0 !important;padding: 10px 8px !important;}

/* Elements: */
p{margin: 0;}
h1,h2,h3,h4,h5,h6{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;font-family: montserrat;}
li{margin: 0;padding: 0;list-style: none;}
input{margin: 0;padding: 1rem;border: none;outline: none;box-sizing: border-box;width: 100%;}
textarea{margin: 0;padding: 1rem;border: none;outline: none;box-sizing: border-box;}

/* Animation: */
.area{background: var(--background-color-primary);width: 100%;height:100%;border-radius: 15px;}
.circles{position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}
.circles li{position: absolute;display: block;list-style: none;width: 20px;height: 20px;background: rgba(255, 255, 255, 0.2);animation: animate 25s linear infinite;bottom: -150px;}

.circles li:nth-child(1){left: 25%;width: 80px;height: 80px;animation-delay: 0s;}
.circles li:nth-child(2){left: 10%;width: 20px;height: 20px;animation-delay: 2s;animation-duration: 12s;}
.circles li:nth-child(3){left: 70%;width: 20px;height: 20px;animation-delay: 4s;}
.circles li:nth-child(4){left: 40%;width: 60px;height: 60px;animation-delay: 0s;animation-duration: 18s;}
.circles li:nth-child(5){left: 65%;width: 20px;height: 20px;animation-delay: 0s;}
.circles li:nth-child(6){left: 75%;width: 110px;height: 110px;animation-delay: 3s;}
.circles li:nth-child(7){left: 35%;width: 150px;height: 150px;animation-delay: 7s;}
.circles li:nth-child(8){left: 50%;width: 25px;height: 25px;animation-delay: 15s;animation-duration: 45s;}
.circles li:nth-child(9){left: 20%;width: 15px;height: 15px;animation-delay: 2s;animation-duration: 35s;}
.circles li:nth-child(10){left: 85%;width: 150px;height: 150px;animation-delay: 0s;animation-duration: 11s;}

@keyframes animate {
    0%{transform: translateY(0) rotate(0deg);opacity: 1;border-radius: 0;}
    100%{transform: translateY(-1000px) rotate(720deg);opacity: 0;border-radius: 50%;}
}




/* Login: */
.login-form{position: absolute;top: 50%;left: 50%;width:  max-content;min-width:300px;padding: 30px 60px;border-radius: 15px;transform: translate(-50%,-50%);box-shadow: 10px 10px 130px -50px rgba(0,0,0,.3);}
.login-form p{display: flex;flex-direction: column;margin-bottom: 1rem;}
.login-form h1{margin-bottom: 1.2rem;}
.login-form input[type="text"],.login-form input[type="password"]{margin: .5rem 0;}
.login-form .actions{display: flex;justify-content: space-between;align-items: center;}
.login-info{background-color: #0e6900;color: #ffffff;display: inline-block;margin-bottom: 1.5rem;border-radius: 5px;padding: 10px 8px !important;}


/* Header: */
.sidebar-menu{width: max-content;max-width: 200px;padding: 15px;-webkit-box-shadow: 2px 0px 18px -10px rgba(0,0,0,0.7);box-shadow: 2px 0px 18px -10px rgba(0,0,0,0.7);gap: 15px;z-index:2;height: unset;}
.menu-item{width: 100%;}
.menu-item .menu-button{all: unset;}
.menu-item .menu-button{display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;padding: 10px 0;border-radius: 5px;cursor: pointer;transition: all 0.2s ease-in-out;flex-direction: column;}
.menu-item .menu-button p{text-align: center;}
.menu-item .menu-button .menu-icon{width: 100px;height: auto;}
.menu-item .menu-button:hover{transform: scale(1.07);}
.menu-item .menu-button:active{transform: scale(0.95);}

.menu ul li a, .menu ul li button{all: unset;}
.menu ul li a, .menu ul li button{display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;padding: 10px 0;border-radius: 5px;cursor: pointer;transition: all 0.2s ease-in-out;flex-direction: column;}
.menu ul li a img, .menu ul li button img{width: 100px;height: auto;}
.menu ul li a:hover, .menu ul li button:hover{transform: scale(1.07);}
.menu ul li a:active, .menu ul li button:active{transform: scale(0.95);}

.topper-menu{-webkit-box-shadow: 0px 0px 25px -12px rgba(0,0,0,0.9);box-shadow: 0px 0px 25px -12px rgba(0,0,0,0.9);padding: 40px; gap: 15px;max-height: 50px;justify-content: space-between;}
.topper-menu .searchbar{display: flex;align-items: center;}
.topper-menu .profile-actions{display: flex;align-items: center;justify-content: center;gap: 15px;}
.topper-menu .menu-button{all: unset;}
.topper-menu .menu-button{display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;padding: 10px 0;border-radius: 5px;cursor: pointer;transition: all 0.2s ease-in-out;flex-direction: column;}
.topper-menu .menu-button:hover{transform: scale(1.07);}
.topper-menu .menu-button:active{transform: scale(0.95);}
.topper-menu .menu-icon{width: 40px;height: auto;border-radius: 100%;}


/* Profile: */

.user-information{display: flex;align-items: flex-start;justify-content: center;flex-direction: row;padding:30px;flex-wrap: wrap;}
.user-information .info-field{width: 50%;}
.user-information .info-field.width{width: 100%;}
.user-information .info-field.buttons{padding: 0 15px;}
.user-information .info-field label{font-weight: 600;display: flex;flex-direction: column;gap: 10px;padding: 0 15px;}
.user-image{display: flex;flex-direction: column;gap:15px;position: absolute;top: 30px;left: 50%;transform: translateX(-50%);align-items: center;}
.user-image img{max-width: 300px;max-height: 300px;width: 80%;height: auto;border-radius: 100%;border: 2px solid var(--primary-color);}
.user-image .user-name{font-size: 1.5rem;font-weight: 600;width: max-content;color: var(--text-color-light);}

.media-edit{all:unset}
.media-edit{position: absolute;top: 0;right: 0;background-color: transparent;object-fit: contain;display: none;cursor: pointer;}
.media-edit img{all: unset;width: 30px; height: auto;filter: invert(100%);}


/* Page-Optimization: */

.container-main{display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;gap: 15px;flex-wrap: wrap;padding-bottom: 30px;}
.container-main .row{gap: 15px; align-items: flex-end;flex: 1 0 auto;width: 100%;}
.container-main .row label{display: flex;flex-direction: column;justify-content: flex-start;gap: 10px;font-size: 70%;}
.container-main .url-input{width: 33%;min-width: 350px;max-width: 500px;padding: .8rem;font-size: 1rem;}

.container-main .wide-headline{width: 100%;font-size: 1.5rem;font-weight: 600;}
.container-main .wide-row{width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;margin-bottom: 1.5rem;}
.container-main .wide-row .content{width: 50%;display: flex;flex-direction: column;gap: 5px;}
.container-main .wide-row .content .h1{color: #db0000;}
.container-main .wide-row .content .h1:first-of-type{color: #000;}

.container-main .wide-row .content .headlines ul{list-style: none;padding: 0;margin: 0;display: flex;flex-direction: column;gap: 5px;font-size: 1.2rem;}
.container-main .wide-row .content .headlines ul li.h1{margin-left: 0;padding-left: 0;}
.container-main .wide-row .content .headlines ul li.h2{margin-left: 0;padding-left: 1rem;}
.container-main .wide-row .content .headlines ul li.h3{margin-left: 1;padding-left: 1rem;}
.container-main .wide-row .content .headlines ul li.h4{margin-left: 2;padding-left: 1rem;}
.container-main .wide-row .content .headlines ul li.h5{margin-left: 3;padding-left: 1rem;}
.container-main .wide-row .content .headlines ul li.h6{margin-left: 4;padding-left: 1rem;}

.container-main .wide-row .notes{width: 50%;display: flex;flex-direction: column;gap: 5px;min-height: 200px;}
.container-main .wide-row .notes textarea{width: 100%;height: 100%;padding: 10px;}


.main-container textarea{border: 0px!important;}

#main-opt-page .buttons.hide-in-print{position: fixed;z-index: 100;}

#content-display .table-wrapper td a{border: 0px!important;}

.extra_notes .headline{margin-bottom: 20px;}

.head_container .btn-prim{margin-left: 1%!important;}


/* --------------------Head-------------------- */



/* --------------------Head-------------------- */


/*
.main-container .step .content_container{display: flex;gap: 30px;}
.main-container .step .headline_container{display: flex;flex-direction: column;margin-bottom: 30px;}
.main-container .step .headline_container textarea{display:block;border-radius:10px;}
.main-container:nth-child(2n) .step textarea.beschreibung{background-color:#fff;}



#display_item{gap: 0;}
input{padding: 6px 0 6px 3px;font-size:18px;}
.yellow{color:#F6AA42;font-weight: 600;}
.main-container{width: 70%;padding: 80px 15%;background-color: #fff;}
.main-container:nth-child(even){background-color:rgb(229, 229, 229);}

.main-container .step .headline{font-size: 40px;color: #0082B9;}
.main-container .step .headline.klein{font-size: 25px;}


.main-container .step .content_container .aktuelle_vergleich_container{display: flex;flex-direction: column;width: 100%;}
.main-container .step .content_container .vergleich_empfehlung_container{display: flex;flex-direction: column;}

.main-container .step .vergleich_optimierung{display: flex;width: 100%;padding: 30px 0;}
.main-container .step .vergleich_optimierung > div{width: 50%;display: flex;flex-direction: column;gap: 10px;}
.main-container .step .vergleich_optimierung input{width: 100%;color: var(--orange);padding:5px 10px;}
.main-container .step .vergleich_optimierung input.title-headline,
.main-container .step .vergleich_optimierung input.title-headline-sm{all:unset}

.main-container .step .handlungs_bedarf_container{display: flex; flex-direction: row;gap: 20px;justify-content: flex-end;margin-top: 30px;padding-top: 20px;border-top: solid 1px #eee;}
.main-container .step .handlungs_bedarf_container .handlungs_bedarf_text{font-size:120%;font-weight:600;color: #0082B9;}
.main-container .step .handlungs_bedarf_container .handlungs_form{display: flex;gap: 10px;font-size: 24px;}
.main-container .step .handlungs_bedarf_container .handlungs_form input{width: 15px;height: 15px;margin-left: 20px;margin-top: 3px;margin-bottom: 0;}
.main-container .step .handlungs_bedarf_container .handlungs_form .red{accent-color: #F63C14;color:#F63C14;}
.main-container .step .handlungs_bedarf_container .handlungs_form .green{accent-color: #39B944;color:#39B944;}


.main-container .step textarea.beschreibung{font-size: 100%;color: var(--text-color);border: transparent;margin: 20px 0;background-color: var(--background-color-secondary);padding: 20px;}

.main-container .step textarea.beschreibung:focus-within{outline: 3px solid var(--orange);}
.main-container .step textarea.input{color: #0082B9;font-size: 20px;font-weight: 600;margin-top: 0px;margin-bottom: 0px;background-color: var(--background-color-secondary);border: none;}
.main-container .step textarea.input:focus-within{outline: 3px solid var(--orange);}


.main-container .step .text{font-size: 18px;margin-top: 5px;}


.main-container .step .unter_headline{font-size: 130%;font-weight: 600;margin-bottom: 20px;color: #0082B9;}
.main-container .step .vergleich_optimierung input{width: 300px;color: var(--orange);padding:5px 10px;}


.main-container .step_1 .subline::before{content: '';background: url('media/step1.png')no-repeat;background-size: 100%;display: block;width: 195px;height: 5px;margin-right:10px;margin-bottom:10px;}
.main-container .step_1 input{padding: 15px;border-radius: 10px;margin: 20px 0;width: 100%;font-size: 100%;}
.main-container .step_1 .content_container .hauptkeyword_container{width: 35%;padding: 30px;display: flex;flex-direction: column;background-color:#F5F5F5;border-radius:10px;align-content: space-between;}
.main-container .step_1 .content_container .hauptkeyword_container .headline{font-size: 24px;color: #0082B9;margin-bottom: 10px;}
.main-container .step_1 .content_container .hauptkeyword_container .hauptkeyword-input{width: 93%;}
.main-container .step_1 .content_container .hauptkeyword_container .hauptkeyword-input::before{content: '';background: url('<?php echo get_stylesheet_directory_uri();?>/media/keyword.png')no-repeat;background-size: 100%;display: block;width: 550px;height: 700px;bottom: -150px;right: 30px;}
.main-container .step_1 .content_container .hauptkeyword_container .werte{display: flex;flex-direction: row;margin: 40px 0;}
.main-container .step_1 .content_container .hauptkeyword_container .werte .wert{display: block;text-align: center;}
.main-container .step_1 .content_container .hauptkeyword_container .werte .wert input{width:83%;}
.main-container .step_1 .content_container .hauptkeyword_container .werte .wert:nth-child(1){padding-right:10px;}
.main-container .step_1 .content_container .hauptkeyword_container .werte .wert:nth-child(2){padding-left:10px;}
.main-container .step_1 .content_container .hauptkeyword_container .werte .wert img{width: 30px; height:30px;display: block;margin: 0 auto;}
.main-container .step_1 .content_container .nebenkeywords_container{width: 54%;padding:30px;background-color:#F5F5F5;border-radius:10px;display: flex;flex-direction: column;}
.main-container .step_1 .content_container .nebenkeywords_container .headline{font-size: 24px;color: #0082B9;margin-bottom: 10px;}
.main-container .step_1 .content_container .nebenkeywords_container .reihe{display: flex;flex-direction: row;gap: 10px;margin-bottom: 20px;}

.main-container .step_2 .subline::before{content: '';background: url('media/step2.png')no-repeat;background-size: 100%;display: block;width: 195px;height: 5px;margin-right:10px;margin-bottom:10px;}
.main-container .step_2 .content_container{margin: 0;}
.main-container .step_2 .content_container .info_container{background-color: #F6AA42;border-radius: 15px;width: 33%;padding: 30px;color: #fff;height: max-content;}
.main-container .step_2 .content_container .info_container .unter_headline{margin-bottom: 10px;display: block;font-size: 24px;font-weight: 600;}
.main-container .step_2 .content_container .info_container .text{padding-right: 100px;font-size:18px;margin:0;}

.main-container .step_3 .subline::before{content: '';background: url('media/step3.png')no-repeat;background-size: 100%;display: block;width: 195px;height: 5px;margin-right:10px;margin-bottom:10px;}
.main-container .step_3 .verbesserung_container{display: flex;flex-direction: column;}
.main-container .step_3 .content_container .inhalt{width: 47%;}
.main-container .step_3 .unter_headline{margin-bottom: 20px;}
.main-container .step_3 .content_container .inhalt #preview{box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;padding: 30px;border-radius: 10px;}
.main-container .step_3 .content_container .inhalt #preview h1{color: #00E;font-size: 120%;font-family:'Montserrat';font-weight: 600;margin: 15px 0;}
.main-container .step_3 .content_container .inhalt #preview:nth-child(2) p{font-size: 100%;font-family:'Montserrat';line-height: 1.3;}
.main-container .step_3 .content_container .verbessert{padding: 20px;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.main-container .step_3 .content_container input{margin: 5px 0;font-size: 17px;padding: 5px;width:98%;background:var(--background-color-secondary);}
.main-container .step_3 .content_container .input_titel{color: #0082B9;font-size: 17px;width: 98%;margin: 0px;font-weight: 600;padding: 5px;margin-bottom: 5px;border: none;background:var(--background-color-secondary);}
.main-container .step_3 .content_container .input_beschreibung{font-size: 17px;font-weight:unset;color:unset;width: 98%;margin: 0px;padding: 5px;margin-bottom: -3px;border: none;background-color: var(--background-color-secondary);}
.main-container .step_3 .content_container .input_beschreibung:focus-within{outline: 3px solid var(--orange);}

.main-container .step_4 .subline::before{content: '';background: url('media/step4.png')no-repeat;background-size: 100%;display: block;width: 195px;height: 5px;margin-right:10px;margin-bottom:10px;}

.main-container .step_5 .subline::before{content: '';background: url('media/step5.png')no-repeat;background-size: 100%;display: block;width: 195px;height: 5px;margin-right:10px;margin-bottom:10px;}

.main-container .step_6 .subline::before{content: '';background: url('media/step6.png')no-repeat;background-size: 100%;display: block;width: 195px;height: 5px;margin-right:10px;margin-bottom:10px;}

.main-container .step_7 .subline::before{content: '';background: url('media/step7.png')no-repeat;background-size: 100%;display: block;width: 195px;height: 5px;margin-right:10px;margin-bottom:10px;}
.main-container .step_7 .pfeil{content: '';display: block;border-right: 3px solid #F6AA42;border-top:3px solid #F6AA42;transform: rotate(45deg);width: 10px;height: 10px;position: absolute;left: -25px;top: 5px;}
.main-container .step_7 .content_container{margin-left: 60px;}
.main-container .step_7 .content_container .input{position: relative;}
.main-container .step_7 .content_container .input textarea{margin-bottom:20px;width: 80%;background-color: var(--background-color-secondary);border: none;min-height: 60px;padding: 20px;}
.main-container .step_7 .content_container .input textarea:focus-within{outline: 3px solid var(--orange);}

.main-container .step_8 .subline::before{content: '';background: url('media/step8.png')no-repeat;background-size: 100%;display: block;width: 195px;height: 5px;margin-right:10px;margin-bottom:10px;}
.main-container .step_8 .content_container .site_aufbau{margin-bottom: 10px;font-size: 20px;color: #0082B9;font-weight: 600;}
.main-container .step_8 .content_container .verschoben1{padding-left: 0px;font-size: 100%;font-family:'Montserrat';}
.main-container .step_8 .content_container .verschoben2{padding-left: 20px;font-size: 100%;font-family:'Montserrat';}
.main-container .step_8 .content_container .verschoben3{padding-left: 40px;font-size: 100%;font-family:'Montserrat';}
.main-container .step_8 .content_container .verschoben4{padding-left: 60px;font-size: 100%;font-family:'Montserrat';}
.main-container .step_8 .content_container .verschoben5{padding-left: 70px;font-size: 100%;font-family:'Montserrat';}
.main-container .step_8 .content_container .verschoben6{padding-left: 80px;font-size: 100%;font-family:'Montserrat';}
.main-container .step.step_8.vergleich .headline_container{width: 100%;}
.main-container .step.step_8 .content_container .aktuelle_vergleich_container{padding-right: 50px;}


.main-container .step_9 .subline::before{content: '';background: url('media/step9.png')no-repeat;background-size: 100%;display: block;width: 195px;height: 5px;margin-right:10px;margin-bottom:10px;}
.main-container .step_10 .subline::before{content: '';background: url('media/step10.png')no-repeat;background-size: 100%;display: block;width: 195px;height: 5px;margin-right:10px;margin-bottom:10px;}

.main-container .step_9_10 .content_container{display: flex;flex-direction: column;gap: 30px;}
.main-container .step_9_10 .content_container .unter_headline_container{display: flex;margin-bottom: 40px;}
.main-container .step_9_10 .content_container .bild{width:20%}
.main-container .step_9_10 .content_container .bild_url{width: 30%;word-wrap: anywhere;padding-right: 30px;}
.main-container .step_9_10 .content_container .aktueller_alt_tag{width: 25%;}
.main-container .step_9_10 .content_container .empfohlener_alt_tag{width: 25%;}
.main-container .step_9_10 .content_container .alt-tag-empfehlung-input{height: fit-content;}
.main-container .step_9_10 .content_container .item_container{display: flex;border-bottom: 1px solid #E5E5E5;padding-bottom: 30px;}
.main-container .step_9_10 .content_container .item_container img{width: 15%;}
.main-container .step_9_10 .content_container .item_container .bild_url,
.main-container .step_9_10 .content_container .item_container .aktueller_alt_tag{font-size: 100%;font-family:'Montserrat'}
.main-container .step_9_10 .content_container .item_container .nourlfound{content:'';display: block;background-image: url("media/image.png");width: 195px;height: 195px;background-repeat: no-repeat;}
.main-container .step_9_10 .content_container .item_container .inputcontainer{width: 25%;}
.main-container .step_9_10 .content_container .item_container input{padding: 10px 0 10px 0px;width: 75%;border-radius: 10px;text-align: center;border: 1px solid #eee;font-size: 100%;}

.main-container .step_10 .content_container .aktuelle_bildgroesse{width: 25%;}
.main-container .step_10 .content_container .item_container .aktuelle_bildgroesse{font-size: 100%;font-family:'Montserrat'}

.main-container .step_11 .subline::before{content: '';background: url('media/step11.png')no-repeat;background-size: 100%;display: block;width: 195px;height: 5px;margin-right:10px;margin-bottom:10px;}

.main-container .step_12 .subline::before{content: '';background: url('media/step12.png')no-repeat;background-size: 100%;display: block;width: 195px;height: 5px;margin-right:10px;margin-bottom:10px;}
.main-container .step_12 .ergebnis{position: relative;}
.main-container .step_12 .content_container .rechtsinner .ergebnis.ende .antwort{color: rgb(246, 60, 20);} 
.main-container .step_12 .checkmark{content: '';display: block;background-image: url("media/checkmark.png");width: 19px;height: 14px;position: absolute;right: 20px;top: 50%;transform: translateY(-50%);}
.main-container .step_12 .kreuz{content: '';display: block;background-image: url("media/kreuz.png");width: 16px;height: 16px;position: absolute;right: 40px;top: 50%;transform: translateY(-50%);}
.main-container .step_12 .content_container .unter_headline{margin-bottom: 20px;}
.main-container .step_12 .content_container .headline.klein{border-bottom: #E5E5E5 1px solid;padding: 20px 0 20px 0;display: block;font-size: 100%;}
.main-container .step_12 .content_container .rechtsinner .headline.klein{padding-right: 0px;}
.main-container .step_12 .content_container .linksinner .headline.klein{font-weight: 600;}
.main-container .step_12 .content_container .inner{width:45%;display: flex;}
.main-container .step_12 .content_container .inner .linksinner{width:50%;display: flex;flex-direction: column;}
.main-container .step_12 .content_container .inner .rechtsinner{width:50%;display: flex;flex-direction: column;}
.main-container .step_12 .content_container .rechtsinner{text-align: end;}
.main-container .step_12 .content_container .rechtsinner .antwort{color:#000;}
*/

#page-footer.main-container{background-color: var(--primary-color);padding: 80px 15% 30px;}
#page-footer.main-container .kontakt .combobox{margin-bottom:20px;}
#page-footer.main-container .kontakt{margin-bottom: 80px;}
#page-footer.main-container .kontakt .headline{color: var(--secondary-color);font-weight: 500;font-size: 40px;display: block;margin-bottom: 30px;}
#page-footer.main-container .kontakt .ansprechpartner{display: flex;}
#page-footer.main-container .kontakt .ansprechpartner .mitarbeiterinfo{font-family: Montserrat;padding: 10px 40px;}
#page-footer.main-container .kontakt .ansprechpartner .mitarbeiterinfo, #page-footer.main-container .kontakt .ansprechpartner .mitarbeiterinfo a{color: var(--secondary-color);}
#page-footer.main-container .kontakt .ansprechpartner .mitarbeiterinfo, #page-footer.main-container .kontakt .ansprechpartner .mitarbeiterinfo .kontaktdaten{margin-top: 15px;}
#page-footer.main-container .kontakt .ansprechpartner .mitarbeiterinfo .kontaktdaten .telefon, #page-footer.main-container .kontakt .ansprechpartner .mitarbeiterinfo .kontaktdaten .mail{display: flex;margin-bottom:10px;}
#page-footer.main-container .kontakt .ansprechpartner .mitarbeiterinfo .kontaktdaten .telefon::before{content: '';background: url('media/telefon.png')no-repeat;background-size: 100%;display: block;width: 20px;height: 20px;margin-right:10px;}
#page-footer.main-container .kontakt .ansprechpartner .mitarbeiterinfo .kontaktdaten .mail::before{content: '';background: url('media/mail.png')no-repeat;background-size: 100%;display: block;width: 20px;height: 20px;margin-right:10px;}


#page-footer.main-container .rechtliches{margin: 0 auto;}
#page-footer.main-container .rechtliches ul{display: flex;}
#page-footer.main-container .rechtliches ul li a{color: var(--secondary-color);margin: 0 20px;}


.entry-content form.data{padding:50px;}
.entry-content form.data div{width:47.5%;}
.entry-content form.data div input{padding:15px;}
.entry-content form.data div textarea{padding:5px 10px;border:none;}

@media print {
    
    .subline{color: red;}
}


/*-------------------------------------------------------------------------------------------*/
@media (max-width:1300px){
    
    .head_container .head_container_content{max-width: 1030px!important;}
}
/*-------------------------------------------------------------------------------------------*/



@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}