/*
FA DIGITAL WERBEKANALFINDER V2.CSS
*/

#top #popup-werbekanalfinder {max-width:1000px; overflow:hidden; border-radius:3px; box-shadow:0 .0625rem .1875rem 0 rgba(0,0,0,.2); min-height:650px; margin:0 auto}
#top #werbekanalfinder .wk_page {display:table; margin:-20px; font-size:14px}
#top #werbekanalfinder .hide {display:none !important}
#top #werbekanalfinder .step-info {padding:50px 25px; height:650px; margin:0; display:table-cell; background:#002c5c; color:#fff; width:35%; vertical-align:top}
#top #werbekanalfinder .step-info .hl-step {font-size:50px; font-weight:400; display:inline-block; width:80px; height:80px; margin:0 0 10px; background:#fff; color:#4d4d4c; text-align:center; line-height:80px; border-radius:100%}
#top #werbekanalfinder .step-info p:not(.hl-step):not(.hl-m) {font-size:18px; font-weight:400}
#top #werbekanalfinder .step-action {padding:40px 25px 100px 25px; margin:0; width:65%; display:table-cell; vertical-align:top; scrollbar-width:thin}
#top #werbekanalfinder .step-action.scrollable {padding:50px 0 0}
#top #werbekanalfinder .step-action.scrollable .scroll-wrapper {overflow:auto; height:600px; padding:0 25px 100px}
#top #werbekanalfinder .step-action .next {position:absolute; bottom:25px; right:25px}
#top #werbekanalfinder .step-action .hint {margin:30px auto; text-align:center; width:85%}
#top #werbekanalfinder .step-select {border-radius:3px; background:#f8f8f8; padding:10px}
#top #werbekanalfinder .step-select select {margin:0 auto}
#top #werbekanalfinder .pagnav {position:absolute; left:25px; bottom:25px}
#top #werbekanalfinder .pagnav a {padding:10px 0; display:block; color:#fff}
#top #werbekanalfinder .err {background:#FDC3CB; color:#7D6064; padding:10px; border-radius:5px}
#top #werbekanalfinder label {display:block; margin:5px 0; padding:0; cursor:pointer}
#top #werbekanalfinder label input {display:none}
#top #werbekanalfinder label input + span {display:block; position:relative; padding:10px 10px 10px 40px; font-size:16px; font-weight:400; border-radius:3px; background:#f8f8f8; color:#4d4d4c}
#top #werbekanalfinder label input + span::before {font-family:'Font Awesome 7 Pro',sans-serif; content:'\f0c8'; font-weight:400; font-size:20px; color:#4d4d4c; position:absolute; left:10px}
#top #werbekanalfinder label input[type=radio] + span::before {content:'\f111'}
#top #werbekanalfinder label input:checked + span {background:#002c5c; color:#fff}
#top #werbekanalfinder label input:checked + span::before {content:'\f14a'; font-weight:500; color:#fff}
#top #werbekanalfinder label input:checked[type=radio] + span::before {content:'\f192'; font-weight:400}
#top #werbekanalfinder .help-toggle {color:#002c5c; font-size:16px; margin:15px 0 5px; display:inline-block}
#top #werbekanalfinder .help-toggle:is(:hover,:focus) {color:#4d4d4c}
#top #werbekanalfinder .help {background:#F8F8F8; border:1px solid #ebebeb; border-radius:3px; margin:10px 0; padding:10px; font-size:14px; color:#4d4d4c}
#top #werbekanalfinder .summary {margin:15px 0; padding:0; border-top:1px solid #ebebeb; border-bottom:1px solid #ebebeb}
#top #werbekanalfinder .summary li {margin:0; padding:5px 10px; font-size:14px; font-weight:400; color:#ebebeb}
#top #werbekanalfinder .summary li span {font-size:18px; display:block; color:#fff; font-weight:500; margin:0 0 5px}
#top #werbekanalfinder .ch {border-radius:3px; padding:10px; background:#f8f8f8; border:1px solid #ebebeb; margin:10px 0; font-size:14px}
#top #werbekanalfinder .creativenotice {border-radius:3px; padding:10px; background:#f8f8f8; border:1px solid #ebebeb; margin:10px 0; font-size:14px}
#top #werbekanalfinder .creativenotice a {color:#000}
#top #werbekanalfinder .featured {border-bottom:1px solid #ebebeb; margin-bottom:5px; padding-bottom:30px}
#top #werbekanalfinder .more {margin-left:0 !important}
#top #werbekanalfinder :is(.objective,.pcp-head) {color:#000; font-size:18px; padding:0; font-weight:500; margin:5px 0 15px; display:inline-block}
#top #werbekanalfinder .recommendation {display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:1fr; grid-column-gap:10px; grid-row-gap:10px; padding-bottom:25px}
#top #werbekanalfinder .influencermarketing {padding-bottom:25px}
#top #werbekanalfinder .werbekanal-box {margin:0; vertical-align:top; position:relative; text-align:center; min-height:120px; padding:10px; display:block; background:#fff; border:1px solid #ebebeb; border-radius:5px}
#top #werbekanalfinder .werbekanal-box:is(:hover,:focus) {box-shadow:0 .0625rem .1875rem 0 rgba(0,0,0,.2)}
#top #werbekanalfinder .werbekanal-box .werbekanal-image {width:70px; height:70px; display:inline-block; margin:0 auto; -o-object-fit:cover; object-fit:cover}
#top #werbekanalfinder .werbekanal-box[data-id="ebay"] .werbekanal-image {width:100px}
#top #werbekanalfinder .werbekanal-box .werbekanal-title {display:block; font-size:12px; color:#4d4d4c}
#top #werbekanalfinder .werbekanal-box .werbekanal-title:is(:hover,:focus) {text-decoration:none}
#top #werbekanalfinder .werbekanal-box .werbekanal-title::before {content:''; display:block; background:transparent; width:100%; height:100%; position:absolute; top:0; left:0}
#top #werbekanalfinder .werbekanal-box .werbekanal-price {display:block; font-size:12px; margin:0 auto}
#top #werbekanalfinder .werbekanal-box .werbekanal-price p {margin:0}
#top #werbekanalfinder .werbekanal-box.package {text-align:left; background:#f8f8f8; min-height:unset; margin:10px auto}
#top #werbekanalfinder .werbekanal-box.package .werbekanal-image {height:auto; width:80px; display:inline-block; margin:0; vertical-align:middle; border:3px solid #ebebeb; border-radius:100%}
#top #werbekanalfinder .werbekanal-box.package .werbekanal-content {vertical-align:middle; display:inline-block; margin:0 0 0 30px}
#top #werbekanalfinder .werbekanal-box.package .werbekanal-title {display:block; color:#002c5c; font-size:16px; margin:0; text-decoration:none}
#top #werbekanalfinder .werbekanal-box.package .werbekanal-price {display:block; margin:0}
#top #werbekanalfinder .f-action {padding:10px !important}
#top #werbekanalfinder .f-action a {color:#002c5c}
#top #werbekanalfinder .f-action a::before {content:''; position:absolute; z-index:1; width:100%; height:100%; background:transparent; top:50%; left:50%; transform:translate(-50%,-50%)}
#top #werbekanalfinder .f-action .f-action-icon {display:block; height:90px; width:100%; -o-object-fit:contain; object-fit:contain; margin:0 auto}
#top #werbekanalfinder .f-action .f-action-icon i {font-size:50px; line-height:90px; text-align:center}

/*Max-Width 989px - Smartphone view*/
@media only screen and (max-width:989px) {
    .responsive #top #popup-werbekanalfinder {max-width:unset; width:100%; min-height:unset; position:fixed; height:100vh; top:0; left:0; border-radius:0; overflow:auto}
    .responsive #top #popup-werbekanalfinder .mfp-close {color:#fff}
    .responsive #top #werbekanalfinder .step-info {height:auto}
    .responsive #top #werbekanalfinder .step-info .hl-step {font-size:30px; width:40px; height:40px; line-height:40px}
    .responsive #top #werbekanalfinder :is(.step-info,.step-action) {width:100%; display:inline-block; padding:15px}
    .responsive #top #werbekanalfinder .step-action {height:auto}
    .responsive #top #werbekanalfinder .step-action.scrollable {padding:15px}
    .responsive #top #werbekanalfinder .step-action.scrollable .scroll-wrapper {overflow:auto; height:auto; padding:0 0 60px}
    .responsive #top #werbekanalfinder .step-action .next {right:unset; font-size:0; bottom:unset; padding:4px 22px; line-height:16px; position:relative; margin:10px 0; float:right}
    .responsive #top #werbekanalfinder .step-action .next::before {content:'Weiter '; font-size:16px; line-height:34px; display:inline; position:relative}
    .responsive #top #werbekanalfinder .step-action .next > i {font-size:16px; line-height:24px}
    .responsive #top #werbekanalfinder .pagnav {position:relative; left:unset; bottom:unset; margin:-69px 0 0 15px; width:40%}
    .responsive #top #werbekanalfinder .pagnav a {color:#4d4d4c}
    .responsive #top #werbekanalfinder .recommendation { grid-template-columns:repeat(2, 1fr)}
    .responsive #top #werbekanalfinder .summary li {padding:0 5px}
    .responsive #top #werbekanalfinder .werbekanal-box.package .werbekanal-content {margin:0 0 0 10px; width:calc(100% - 100px)}
}