/*
 ____  ___  _____    __        __ ___   ____   _  __ _____  ____
| __ )|_ _||_   _|   \ \      / // _ \ |  _ \ | |/ /| ____||  _ \
|  _ \ | |   | | _____\ \ /\ / /| | | || |_) || ' / |  _|  | |_) |
| |_) || |   | ||_____|\ V  V / | |_| ||  _ < | . \ | |___ |  _ <
|____/|___|  |_|        \_/\_/   \___/ |_| \_\|_|\_\|_____||_| \_\

Handcrafted pixels

*/
@charset "UTF-8";

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/montserrat.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/raleway.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --body-bg: #ffffff;
    --txt-color: #222222;
    --dashboard-header: #26474c;
    --dashboard-bakground: #dedede;
    --orange: #f9930f;
    --orange-dark: #d87d07;
    --white: #ffffff;
    /* bootstrap 5.3.3 */
    --bs-btn-disabled-bg: #f9930f;
    --bs-btn-disabled-color: #222222;
    --bs-btn-hover-bg: #f9930f;
}

#nomark {
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

body {
    font-family: 'Raleway', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 0.95rem;
    background: var(--body-bg);
    color: var(--txt-color);
    overflow-y: scroll;
    overflow-x: hidden !important;
}

@media only screen and (max-width: 767px) {
    .logo {
        margin-left: -1.2rem;
    }
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--dashboard-header);
    margin-top: 0px;
    font-style: normal;
    text-transform: normal;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.hdl {
    margin-top: 2rem;
    margin-left: 2rem;
}

.hdl-dashboard {
    color: var(--white);
    font-size: 1.4rem;
    padding-top: 5px;
    margin-left: -20px;
}

.hdl h1 {
    font-family: 'Montserrat', sans-serif;
    color: var(--white);
    margin-top: 0px;
    font-style: normal;
    text-transform: normal;
    font-size: 4rem;
    transition: margin 700ms;
}

p {
    font-family: 'Raleway', sans-serif;
    color: var(--txt-color);
    font-size: 1rem;
    line-height: 1.75rem;
    margin-bottom: 15px;
    font-weight: normal;
}

.img {
    max-width: 100%;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
.f-right {
    float: right;
}
.fix {
    overflow: hidden;
}
.clear {
    clear: both;
}

a,
.button {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

a:focus,
.button:focus {
    text-decoration: none;
    outline: none;
}

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

a:focus,
a:hover {
    text-decoration: none;
}

button {
    color: var(--white);
    outline: medium none;
}
button:focus,
input:focus,
input:focus,
textarea,
textarea:focus {
    outline: 0;
}
.uppercase {
    text-transform: uppercase;
}
input:focus::-moz-placeholder {
    opacity: 0;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
.capitalize {
    text-transform: capitalize;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
}
ul {
    margin: 0px;
    padding: 0px;
}
li {
    list-style: none;
}
hr {
    border-bottom: 1px solid #eceff8;
    border-top: 0 none;
    margin: 30px 0;
    padding: 0;
}
.overlay {
    position: relative;
    z-index: 0;
}
.overlay::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.section-padding {
    padding-top: 120px;
    padding-bottom: 120px;
}
.separator {
    border-top: 1px solid #f2f2f2;
}

/**
 *
 * The Buttons 
 *
 */
.btn {
    background: var(--orange);
    border-radius: 200px;
    -moz-user-select: none;
    user-select: none;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    color: var(--txt-color);
    cursor: pointer;
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 0;
    margin-bottom: 0;
    padding-top: min(27px, 2em) !important;
    padding-bottom: min(27px, 2em) !important;
    padding-right: min(44px, 8%) !important;
    padding-left: min(44px, 8%) !important;
    cursor: pointer;
    transition: color 0.4s linear;
    position: relative;
    z-index: 1;
    border: 0;
    overflow: hidden;
    margin: 0;
    white-space: nowrap;
    line-height: 0.5 !important; /* font-awesome fix */
}

/**
 *
 * font-awesome fix
 * To get same height on button with icon and without icon
 *
 */
.btn i {
    line-height: 0.5 !important;
}

.btn:hover {
    color: var(--txt-color) !important;
    background-color: var(--orange);
}

.btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 101%;
    height: 101%;
    background: var(--orange-dark);
    z-index: 1;
    border-radius: 5px;
    transition: transform 1.1s;
    transition-timing-function: ease;
    transform-origin: 0 0;
    transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
    transform: scaleX(0);
    border-radius: 0;
}

.btn:hover::before {
    transform: scaleX(1);
    color: var(--white) !important;
    z-index: -1;
}

.btn.focus,
.btn:focus,
.btn:active {
    outline: none !important;
    box-shadow: none;
}

/**
 *
 *
 */
.BtnShuffle {
    width: 43px;
    height: 43px;
    border: 1px solid rgb(204, 204, 204);
    background-color: rgb(236, 239, 239);
    color: #333333;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 0.5rem;
    /* border-radius: 6px; */
    border-radius: 0;
    transition: background-color 0.4s ease, transform 0.3s ease;
    margin-right: 12.5px;

    white-space: normal; /* Zeilenumbruch erlauben */
    overflow-wrap: break-word; /* Langes Wort umbrechen */
}

.BtnShuffle:hover {
    background-color: rgb(196, 201, 201);
    transform: scale(1.1);
}

/**
 *
 *
 */
.breadcrumb > .active {
    color: #888;
}

#back-top {
    background: var(--dashboard-header);
    height: 50px;
    width: 50px;
    right: 31px;
    bottom: 18px;
    position: fixed;
    color: var(--white);
    font-size: 20px;
    text-align: center;
    border-radius: 50%;
    line-height: 48px;
    border: 2px solid transparent;
    z-index: 1;
}

#back-top a {
    color: var(--white) !important;
}

@media (max-width: 575px) {
    #back-top {
        right: 16px;
    }
}

#back-top a i {
    display: block;
    line-height: 50px;
}
.sticky-bar {
    left: 0;
    margin: auto;
    position: fixed;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    z-index: 9999;
    -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    background: var(--white);
}
.mt-5 {
    margin-top: 5px;
}
.mb-5 {
    margin-bottom: 5px;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-50 {
    margin-bottom: 50px;
}
.mb-70 {
    margin-bottom: 70px;
}
.mb-80 {
    margin-bottom: 80px;
}
.pt-5 {
    padding-top: 5px;
}
.pt-50 {
    padding-top: 50px;
}
.pb-5 {
    padding-bottom: 5px;
}

/**
 *
 *
 *
 */
.section-padding2 {
    padding-top: 200px;
    padding-bottom: 200px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
    .section-padding2 {
        padding-top: 150px;
        padding-bottom: 200px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .section-padding2 {
        padding-top: 200px;
        padding-bottom: 200px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-padding2 {
        padding-top: 120px;
        padding-bottom: 100px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .section-padding2 {
        padding-top: 120px;
        padding-bottom: 70px;
    }
}
@media (max-width: 575px) {
    .section-padding2 {
        padding-top: 120px;
        padding-bottom: 70px;
    }
}

/**
 *
 *
 *
 */
.testimonial-padding {
    padding-top: 50px;
    padding-bottom: 0px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial-padding {
        padding-top: 70px;
        padding-bottom: 60px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .testimonial-padding {
        padding-top: 60px;
        padding-bottom: 40px;
    }
}
@media (max-width: 575px) {
    .testimonial-padding {
        padding-top: 60px;
        padding-bottom: 40px;
    }
}

/**
 *
 *
 *
 */
.footer-padding {
    padding-top: 170px;
    padding-bottom: 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
    .footer-padding {
        padding-top: 170px;
        padding-bottom: 50px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .footer-padding {
        padding-top: 170px;
        padding-bottom: 50px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer-padding {
        padding-top: 100px;
        padding-bottom: 50px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .footer-padding {
        padding-top: 80px;
        padding-bottom: 0px;
    }
}
@media (max-width: 575px) {
    .footer-padding {
        padding-top: 80px;
        padding-bottom: 0px;
    }
}
@media (max-width: 575px) {
    .section-title {
        margin-bottom: 50px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .section-title {
        margin-bottom: 50px;
    }
}
.section-title span {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 22px;
    color: var(--dashboard-header);
    display: inline-block;
    font-family: 'Montserrat', cursive;
}
.section-title h2 {
    font-size: 2rem;
    display: block;
    color: var(--dashboard-header);
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .section-title h2 {
        font-size: 31px;
        text-align: center;
    }
}
@media (max-width: 575px) {
    .section-title h2 {
        text-align: center;
        font-size: 31px;
    }
}
.section-title5 h2 {
    font-size: 36px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .section-title5 h2 {
        font-size: 31px;
        text-align: left;
    }
}
@media (max-width: 575px) {
    .section-title5 h2 {
        text-align: left;
        font-size: 31px;
    }
}
.theme-color {
    color: var(--orange);
}
.header-area {
    background: var(--white); /* #5a8018; */
}

.header-area .header-bottom {
    padding: 0px 90px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
    .header-area .header-bottom {
        padding: 0px 20px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-area .header-bottom {
        padding: 0px 20px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-area .header-bottom {
        padding: 22px 50px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .header-area .header-bottom {
        padding: 22px 20px;
    }
}
@media (max-width: 575px) {
    .header-area .header-bottom {
        padding: 22px 20px;
    }
}
.header-area .main-header .main-menu ul li {
    display: inline-block;
    position: relative;
    z-index: 1;
}
.header-area .main-header .main-menu ul li a {
    color: var(--txt-color);
    font-weight: 500;
    padding: 39px 27px;
    display: block;
    font-size: 16px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    /*     .header-area .main-header .main-menu ul li:first-child a {
        padding-left: 0px;
    } */
    .header-area .main-header .main-menu ul li a {
        padding: 39px 10px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1380px) {
    .header-area .main-header .main-menu ul li a {
        padding: 39px 17px;
    }
}
.header-area .main-header .main-menu ul li:hover > a {
    color: var(--txt-color);
}
.header-area .main-header .main-menu ul li.login a i {
    padding-right: 10px;
}
.header-area .main-header .main-menu ul ul.submenu {
    position: absolute;
    width: 150px;
    background: var(--white);
    left: 0;
    top: 120%;
    visibility: hidden;
    opacity: 0;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05);
    padding: 17px 0;
    border-top: 5px solid var(--orange);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
.header-area .main-header .main-menu ul ul.submenu > li {
    margin-left: 7px;
    display: block;
}
.header-area .main-header .main-menu ul ul.submenu > li > a {
    padding: 6px 10px !important;
    font-size: 16px;
    color: #0b1c39;
    text-transform: capitalize;
}
.header-area .main-header .main-menu ul ul.submenu > li > a:hover {
    color: var(--orange);
    background: none;
}
.main-menu ul > li:hover > ul.submenu {
    visibility: visible !important;
    opacity: 1 !important;
    top: 100% !important;
    z-index: 99;
}
.header-sticky ul li a {
    padding: 10px 19px;
}
.header-bottom.header-sticky.sticky-bar {
    background: rgba(38, 71, 76, 0.9);
}
.header-sticky.sticky-bar .main-menu ul > li > a {
    padding: 27px 13px;
}
.header-transparent {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9;
}
.mobile_menu {
    position: absolute;
    right: 0px;
    width: 100%;
    z-index: 99;
}

/**
 *
 * Landingpage Agenturen 
 *
 */
.section-padding-agenturen {
    padding-top: 120px;
    padding-bottom: 120px;
}

.section-padding-agenturen:nth-child(even) {
    background: #f1eeee;
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
    .section-padding-agenturen {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .section-padding-agenturen {
        padding-top: 120px;
        padding-bottom: 90px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-padding-agenturen {
        padding-top: 100px;
        padding-bottom: 40px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .section-padding-agenturen {
        padding-top: 65px;
        padding-bottom: 10px;
    }
}
@media (max-width: 575px) {
    .section-padding-agenturen {
        padding-top: 65px;
        padding-bottom: 10px;
    }
}

.teaser-agenturen {
    font-size: 2rem;
    padding: 1rem;
    padding-top: 0;
    font-family: Montserrat, sans-serif;
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    background: rgba(40, 69, 77, 0.9);
    border-radius: 1rem;
    scale: 0.7;
}

.teaser-valid-until {
    display: block;
    font-size: 0.7rem;
    transform: rotate(-12deg);
    color: white;
    text-shadow: none;
    float: right;
    border-radius: 5px;
    background-color: f23344;
    padding: 0.3rem;
}

.landingpage-header {
    background-image: url(/assets/img/agenturen/hintergrund.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom-left-radius: 700px 70px;
    border-bottom-right-radius: 700px 70px;
    max-height: 80vh;
}

.background-above-the-fold {
    background-image: url(/assets/img/homepage/hintergrund.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-repeat: no-repeat;
    border-bottom-left-radius: 700px 70px;
    border-bottom-right-radius: 700px 70px;
    /*  max-height: 80vh; */
}

.background-above-the-fold-ergebnis-ausgabe {
    background: var(--white);
    background-image: url(/assets/img/homepage/hintergrund-lead.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/**
 *
 *
 *
 */
.header-transparent {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9;
}

.blog-header {
    background-image: url(/assets/img/blog/header.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 260px;
    background-position: center -50px;
}

/**
  *
  * 14.01.2025 
  *
  */
.agency-h5 {
    font-size: 2rem;
    font-weight: bold;
    color: white;
}

.agency-li {
    list-style-type: none;
    line-height: 2rem;
}

.agency-card {
    border: 0;
    margin-bottom: 2rem;
}

.agency-halbkreis {
    /* Falls gewünscht */
    display: block;
    margin: 0;
}

.agency-halbkreis5 {
    /* Falls du das noch brauchst */
    display: block;
    margin: 0;
}

.agency-css-12nncb0 {
    position: relative;
    white-space: nowrap;
}

.agency-css-12nncb0::after {
    content: '';
    position: absolute;
    top: calc(100% - 0.1em);
    left: 0;
    width: 100%;
    height: 0.35em;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzk3IDIwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoCiAgICBkPSJtMy43NSAxMiA4Ljg4LS41NGMxMy4zMi0uODIgMjYuNjUtMS42IDM5Ljk0LTIuMzNsOC44NS0uNDkgNC40My0uMjMgOC44My0uNDcgNC40MS0uMjMgOC44MS0uNDQgOC43OC0uNDQgNC4zOS0uMiA4Ljc0LS40MiA0LjM3LS4yIDguNy0uMzkgNC4zMy0uMTkgOC42NS0uMzcgOC42MS0uMzUgOC41Ny0uMzQgOC41Mi0uMzMgMTIuNy0uNDYgOC40LS4yOCA4LjM0LS4yOCA4LjI5LS4yNSA4LjIyLS4yNCA4LjE2LS4yMiA4LjEtLjIgOC4wMy0uMiAxMS45LS4yNSA3Ljg0LS4xNWM1NC42LS45NiAxMDMuMzQtLjY0IDE0MS42NiAxLjNhNCA0IDAgMCAxLS40IDhDMzQ5LjE5IDguNiAyOTEuOTQgOC40OCAyMjcuODYgMTBsLTguMDQuMi00LjA1LjEtOC4xNS4yMi00LjEuMTItOC4yMy4yNS00LjE1LjEyLTguMzIuMjhjLTUuNTcuMTgtMTEuMTguMzgtMTYuODIuNThsLTguNDguMzItOC41My4zMy04LjU4LjM1LTQuMy4xOC04LjYzLjM3LTguNjcuMzgtOC43LjQtOC43Mi40LTguNzYuNDMtOC43OC40NC00LjQuMjItOC44LjQ2LTguODMuNDctOC44NC40OS00LjQzLjI0LTguODUuNS00LjQzLjI2LTguODYuNTItOC44Ny41M2MtMS40Ny4xLTIuOTUuMTgtNC40My4yN0w0LjI1IDIwYTQgNCAwIDEgMS0uNS03Ljk4WiIKICAgIGZpbGw9IiNGRjRBMTEiIGZpbGwtcnVsZT0ibm9uemVybyIgLz4KPC9zdmc+Cg==);
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

@media (max-width: 575px) {
    .agency-card {
        width: 90%;
    }
}

/**
 *
 *
 */
@media (max-width: 575px) {
    .blog-header {
        background-position: center 50px;
    }
}

.blog-header .hero-cap h2 {
    color: var(--white);
    font-size: 42px;
    font-weight: 700;
    text-transform: uppercase;
    padding-top: 65px;
    font-style: italic;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
@keyframes animate {
    0% {
        transform: scale(1) rotate(0deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}
.testimonial-area {
    position: relative;
    background: #f1eeee;
}
.testimonial-area .testimonial-caption {
    padding-left: 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial-area .testimonial-caption {
        padding-left: 40px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .testimonial-area .testimonial-caption {
        padding-left: 40px;
    }
}
@media (max-width: 575px) {
    .testimonial-area .testimonial-caption {
        padding-left: 40px;
    }
}
.testimonial-area .testimonial-caption .testimonial-top-cap img {
    margin-bottom: 50px;
    width: auto;
    display: inline-block;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial-area .testimonial-caption .testimonial-top-cap img {
        margin-bottom: 30px;
    }
}
@media (max-width: 575px) {
    .testimonial-area .testimonial-caption .testimonial-top-cap img {
        margin-bottom: 30px;
    }
}
.testimonial-area .testimonial-caption .testimonial-top-cap p {
    line-height: 1.5;
    padding-right: 100px;
    margin-bottom: 50px;
    font-size: 1rem;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .testimonial-area .testimonial-caption .testimonial-top-cap p {
        font-size: 1rem;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial-area .testimonial-caption .testimonial-top-cap p {
        font-size: 1rem;
        padding-right: 40px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial-area .testimonial-caption .testimonial-top-cap p {
        font-size: 1rem;
        padding-right: 30px;
        margin-bottom: 60px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .testimonial-area .testimonial-caption .testimonial-top-cap p {
        font-size: 1rem;
        padding-right: 30px;
        margin-bottom: 60px;
    }
}
@media (max-width: 575px) {
    .testimonial-area .testimonial-caption .testimonial-top-cap p {
        font-size: 1rem;
        padding-right: 30px;
        margin-bottom: 60px;
    }
}
.testimonial-caption .founder-text {
    margin-left: 20px;
}
.testimonial-caption .founder-text span {
    color: var(--orange);
    font-size: 1rem;
    /*  font-weight: 600 */
}
/* .testimonial-caption .founder-text p {
    color: #57667e;
    font-weight: 500;
    line-height: 1.5;
} */
.h1-testimonial-active button.slick-arrow {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    border: 0;
    padding: 0;
    z-index: 2;
    cursor: pointer;
    font-size: 20px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    color: var(--orange);
    background: none;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .h1-testimonial-active button.slick-arrow {
        left: -28px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .h1-testimonial-active button.slick-arrow {
        left: -28px;
    }
}
.h1-testimonial-active button.slick-next {
    left: auto;
    right: 0px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .h1-testimonial-active button.slick-next {
        right: -28px;
    }
}
.slick-initialized .slick-slide {
    outline: 0;
}
.irs-to,
.irs-from,
.irs-max,
.irs-min {
    display: none;
}
.irs-bar {
    height: 2px;
    top: 33px;
    border-top: 1px solid #ff3368;
    border-bottom: 1px solid #ff3368;
    background: #ff3368;
    background: linear-gradient(to top, #ff3368 0%, #ff3368 100%);
}
.irs-line {
    height: 2px;
    top: 33px;
    background: linear-gradient(to bottom, #ffeaef -50%, #ffeaef 150%);
    border: 1px solid #ffeaef;
    border-radius: 16px;
    -moz-border-radius: 16px;
}

/**
 *
 * Footer
 *
 */
.footer-area {
    background-color: #424f51;
    background: linear-gradient(to bottom right, #424f51, #41656b);
}
.footer-area .footer-title h4 {
    color: #adb0b6;
    font-size: 20px;
    margin-bottom: 29px;
    font-weight: 500;
    text-transform: capitalize;
    font-family: 'Raleway', sans-serif;
}
.footer-area .footer-title h4 span {
    color: var(--white);
}
.footer-area .footer-title ul li {
    color: #adb0b6;
    margin-bottom: 15px;
}
.footer-area .footer-title a {
    /* ul li  */
    color: #adb0b6;
    font-weight: 300;
}
.footer-area .footer-title a:hover {
    /* ul li  */
    color: #b1b2b4;
    padding-left: 5px;
}
.footer-area .footer-title P {
    color: #adb0b6;
}

.footer-area .footer-bottom {
    border-top: 1px solid var(--txt-color) 222;
    padding: 40px 0px 23px;
}
@media (max-width: 575px) {
    .footer-area .footer-bottom {
        padding: 35px 0px 20px;
    }
}
.footer-area .footer-bottom .footer-copy-right p {
    color: #adb0b6;
    font-weight: 300;
    font-size: 16px;
    line-height: 2;
    margin-bottom: 12px;
}
.footer-area .footer-bottom .footer-copy-right p i {
    color: var(--orange);
}
.footer-area .footer-bottom .footer-copy-right p a {
    color: var(--orange);
}

/**
 *
 *
 *
 */
.home-blog-area .single-team .blog-img {
    overflow: hidden;
    margin-bottom: 19px;
    border-radius: 12px;
}
.home-blog-area .single-team .blog-img img {
    width: 100%;
    transform: scale(1);
    transition: all 0.6s ease-out 0s;
}
.home-blog-area .single-team .team-caption span {
    color: var(--orange);
    font-size: 14px;
    font-weight: 500;
    display: block;
    margin-bottom: 17px;
}
.home-blog-area .single-team .team-caption h3 {
    padding-right: 48px;
    margin-bottom: 17px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .home-blog-area .single-team .team-caption h3 {
        padding-right: 0px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .home-blog-area .single-team .team-caption h3 {
        padding-right: 0px;
    }
}
@media (max-width: 575px) {
    .home-blog-area .single-team .team-caption h3 {
        padding-right: 0px;
    }
}
.home-blog-area .single-team .team-caption h3 a {
    /* color: #1c1930; */
    /* font-weight: 700; */
    font-size: 1.6rem;
}
.home-blog-area .single-team .team-caption p {
    /* color: #57667e; */
    /*  font-size: 0.7rem; */
}
.home-blog-area .single-team:hover .blog-img img {
    transform: scale(1.1);
}
.blog_area a {
    color: 'Raleway', sans-serif !important;
    text-decoration: none;
    transition: 0.4s;
}
.blog_area a:hover,
.blog_area a :hover {
    background: -webkit-linear-gradient(131deg, var(--orange) 0%, var(--orange) 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    transition: 0.4s;
}
.blog_area.section-padding {
    padding-top: 48px;
    padding-bottom: 80px;
}
/* Same top clearance as .section-padding2. The header is
   position:absolute, so without the listing hero the cover
   would start under the logo and the siegel. */
.blog_area.single-post-area.section-padding {
    padding-top: 200px;
}
@media (max-width: 991px) {
    .blog_area.single-post-area.section-padding {
        padding-top: 120px;
    }
}
.ps-blog-cover {
    display: block;
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
@media (max-width: 575px) {
    .ps-blog-cover {
        height: 220px;
    }
}
.blog_item {
    margin-bottom: 50px;
}
.blog_details {
    padding: 30px 0 20px 10px;
    box-shadow: 0px 10px 20px 0px rgba(221, 221, 221, 0.3);
    background: #dddeda;
}
@media (min-width: 768px) {
    .blog_details {
        padding: 60px 30px 35px 35px;
    }
}
.blog_details p {
    margin-bottom: 30px;
}
.blog_details a {
    color: #000000;
}

.blog_details h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}
@media (min-width: 768px) {
    .blog_details h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }
}
.blog-info-link li {
    float: left;
    font-size: 14px;
}
.blog-info-link li a {
    color: #828382;
}
.blog-info-link li i,
.blog-info-link li span {
    font-size: 13px;
    margin-right: 5px;
}
.blog-info-link li::after {
    content: '|';
    padding-left: 10px;
    padding-right: 10px;
}
.blog-info-link li:last-child::after {
    display: none;
}
.blog-info-link::after {
    content: '';
    display: block;
    clear: both;
    display: table;
}
.blog_item_img {
    position: relative;
}
.blog_item_img .blog_item_date {
    position: absolute;
    bottom: -10px;
    left: 10px;
    display: block;
    color: var(--white);
    background-color: #b2b3b1;
    padding: 8px 15px;
    border-radius: 5px;
    text-align: center;
}
@media (min-width: 768px) {
    .blog_item_img .blog_item_date {
        bottom: -20px;
        left: 40px;
        padding: 13px 30px;
    }
}
.blog_item_img .blog_item_date h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 0;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .blog_item_img .blog_item_date h3 {
        font-size: 30px;
    }
}
.blog_item_img .blog_item_date p {
    font-size: 18px;
    margin-bottom: 0;
    color: var(--white);
}
@media (min-width: 768px) {
    .blog_item_img .blog_item_date p {
        font-size: 18px;
    }
}
.blog_right_sidebar .widget_title {
    font-size: 20px;
    margin-bottom: 40px;
}
.blog_right_sidebar .widget_title::after {
    content: '';
    display: block;
    padding-top: 15px;
    border-bottom: 1px solid #f0e9ff;
}
.blog_right_sidebar .single_sidebar_widget {
    background: #dddeda;
    padding: 30px;
    margin-bottom: 30px;
}
.blog_right_sidebar .popular_post_widget .post_item .media-body {
    justify-content: center;
    align-self: center;
    padding-left: 20px;
}
.blog_right_sidebar .popular_post_widget .post_item .media-body h3 {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 6px;
    transition: all 0.3s linear;
}
.blog_right_sidebar .popular_post_widget .post_item .media-body a:hover {
    color: var(--white);
}
.blog_right_sidebar .popular_post_widget .post_item .media-body p {
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 0px;
}
.blog_right_sidebar .popular_post_widget .post_item + .post_item {
    margin-top: 20px;
}
.blog_right_sidebar .tag_cloud_widget ul li {
    display: inline-block;
}
.blog_right_sidebar .tag_cloud_widget ul li a {
    display: inline-block;
    background: #b2b3b1;
    padding: 4px 20px;
    margin-bottom: 8px;
    margin-right: 3px;
    transition: all 0.3s ease 0s;
    color: var(--txt-color);
    font-size: 13px;
    border-radius: 3px;
}
.blog_right_sidebar .tag_cloud_widget ul li a:hover {
    background: #828382;
    color: var(--txt-color) !important;
    -webkit-text-fill-color: var(--txt-color);
    text-decoration: none;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.blog_right_sidebar .br {
    width: 100%;
    height: 1px;
    background: #eee;
    margin: 30px 0px;
}
.blog-pagination {
    margin-top: 80px;
}
.blog-pagination .page-link {
    font-size: 14px;
    position: relative;
    display: block;
    padding: 0;
    text-align: center;
    margin-left: -1px;
    line-height: 45px;
    width: 45px;
    height: 45px;
    border-radius: 0 !important;
    color: #8a8a8a;
    border: 1px solid #f0e9ff;
    margin-right: 10px;
}
.blog-pagination .page-link i,
.blog-pagination .page-link span {
    font-size: 13px;
}
.blog-pagination .page-item.active .page-link {
    background-color: #fbf9ff;
    border-color: #f0e9ff;
    color: #888888;
}
.blog-pagination .page-item:last-child .page-link {
    margin-right: 0;
}
.single-post-area .blog_details {
    box-shadow: none;
    padding: 0;
}
.single-post-area .blog_details {
    padding: 1.3rem;
}
.single-post-area .blog_details p {
    margin-bottom: 20px;
    font-size: 15px;
}
.single-post-area .quotes {
    padding: 15px 15px 15px 20px;
    border-left: 2px solid;
}
@media (min-width: 768px) {
    .single-post-area .quotes {
        padding: 25px 25px 25px 30px;
    }
}
.single-post-area .arrow {
    position: absolute;
}
.single-post-area .navigation-top {
    padding-top: 15px;
    border-top: 1px solid #f0e9ff;
}
.single-post-area .navigation-top p {
    margin-bottom: 0;
}
.single-post-area .navigation-top .like-info {
    font-size: 14px;
}
.single-post-area .navigation-top .like-info i,
.single-post-area .navigation-top .like-info span {
    font-size: 16px;
    margin-right: 5px;
}
.single-post-area .navigation-top .social-icons li {
    display: inline-block;
    margin-right: 15px;
}
.single-post-area .navigation-top .social-icons li:last-child {
    margin: 0;
}
.single-post-area .navigation-top .social-icons li i,
.single-post-area .navigation-top .social-icons li span {
    font-size: 14px;
    color: #999999;
}
.single-post-area .blog-author {
    padding: 40px 30px;
    background: #dddeda;
    margin-top: 50px;
}
@media (max-width: 600px) {
    .single-post-area .blog-author {
        padding: 20px 8px;
    }
}
.single-post-area .blog-author img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-right: 30px;
}
@media (max-width: 600px) {
    .single-post-area .blog-author img {
        margin-right: 15px;
        width: 45px;
        height: 45px;
    }
}
.single-post-area .blog-author a {
    display: inline-block;
}
.single-post-area .blog-author a:hover {
    color: var(--orange);
}
.single-post-area .blog-author p {
    margin-bottom: 0;
    font-size: 15px;
}
.single-post-area .blog-author h4 {
    font-size: 16px;
}
.dropdown .dropdown-menu {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.overlay::before {
    background-image: -moz-linear-gradient(170deg, rgba(34, 34, 34, 0) 0%, #000 100%);
    background-image: -webkit-linear-gradient(170deg, rgba(34, 34, 34, 0) 0%, #000 100%);
    background-image: -ms-linear-gradient(170deg, rgba(34, 34, 34, 0) 0%, #000 100%);
}

sup,
sub,
u,
del {
    color: #adb0b6;
}

.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 {
    color: #828bb2;
}
.form-select {
    height: 40px;
    width: 100%;
}
.form-select .nice-select {
    border: none;
    border-radius: 0px;
    height: 40px;
    background: #f9f9ff;
    padding-left: 45px;
    padding-right: 40px;
    width: 100%;
}
.form-select .nice-select .list {
    margin-top: 0;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    width: 100%;
    padding: 10px 0 10px 0px;
}
.form-select .nice-select .list .option {
    font-weight: 300;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    line-height: 28px;
    min-height: 28px;
    font-size: 12px;
    padding-left: 45px;
}
.form-select .nice-select .list .option.selected {
    color: #adb0b6;
    background: transparent;
}
.form-select .nice-select .list .option:hover {
    color: #adb0b6;
    background: transparent;
}
.form-select .current {
    margin-right: 50px;
    font-weight: 300;
}
.form-select .nice-select::after {
    right: 20px;
}
.mb-30 {
    margin-bottom: 30px;
}

.dashboard-background {
    background: var(--dashboard-bakground);
}

/**
 *
 * Lightbulb
 *
 */
.lightbulb {
    color: #d5c118;
    transform: rotate(10deg);
    animation: glow 3s linear 1;
    cursor: help;
}

/**
*
* BW CMS System
*
*/
.bwWorkbench {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 102px;
    max-height: 102px;
    z-index: 10;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    -ms-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px);
}

.bwFadeToGreyAndBlur {
    opacity: 0.5;
    filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    -ms-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.bwIcon {
    color: var(--txt-color);
    cursor: pointer;
    float: right;
    margin-right: 2rem;
    background: #ffffff;
    padding: 0.7rem;
    padding-top: 0.5rem;
    border-radius: 18%;
    width: 40px;
    height: 40px;
    display: block;
    margin-top: 30px;
}

.bwIcon:hover {
    transform: scale(1.1);
}

#bwContent {
    border: 1px solid transparent;
}

.btnCreate {
    border-radius: 2rem;
    border: none;
    padding: 1rem 3rem 1rem 3rem;
    background-color: #121821;
    position: relative;
    color: white;
    font-size: 1.6rem;
    transition: all 250ms;
    cursor: pointer;
    z-index: 1;
}

.btnCreate::before {
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    border: 0.1rem solid #576a19;
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    opacity: 0;
}

.animate::before {
    animation: 1000ms border;
}

@keyframes border {
    0% {
        transform: scale(1, 1);
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.3, 1.6);
    }
}

/**
*
* Nav Tab (global)
*
*/
.nav-tabs {
    padding-bottom: 1rem;
    border-bottom: 5px solid #cccccc;
    margin-left: 12px;
}

.nav-tabs .nav-link {
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 0;
    border: 0;
    background-color: var(--dashboard-header);
    margin-right: 1rem;
    color: var(--white);
}

@media only screen and (max-width: 767px) {
    .nav-tabs .nav-link {
        margin-right: 0.2rem;
    }
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--white);
    background-color: #009991;
}

/**
 *
 * Pfeil
 *
 */
.nav-tabs .nav-link.active {
    position: relative;
}

.nav-tabs .nav-link.active::after {
    content: '';
    display: block;
    position: absolute;
    background-color: #009991;
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    bottom: -6px;
    left: calc(50% - 5px);
    animation: sweep002 0.5s ease-in-out;
}

@keyframes sweep002 {
    0% {
        opacity: 0;
        margin-top: -10px;
    }

    100% {
        opacity: 1;
        margin-top: 0px;
    }
}

/**
*
*
* Navigation
*
*/
.siegel {
    width: 310px;
    height: auto;
}

@media (max-width: 1300px) {
    .siegel {
        width: 280px;
    }
}

@media (max-width: 1000px) {
    .siegel {
        width: 250px;
    }
}

@media (max-width: 767px) {
    .siegel {
        margin-left: -20px;
    }
}

/**
*
* Formulare
*
*/
/* fix: Schalte hässliche Pfeile im Number Feld ab */
.form-control {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Schalte hässliche Pfeile im Number Feld ab */
/* Für Chrome, Edge, Safari */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.form-control {
    background-color: var(--white);
    border: 1px solid #dedede;
    padding: 1rem;
    border-radius: 200px;
    color: var(--txt-color);
    appearance: textfield;
    -moz-appearance: textfield; /* Schalte hässliche Pfeile im Number Feld ab */
}

.form-control:focus {
    background-color: var(--white);
    color: var(--txt-color);
    border: 1px solid #a09f9f;
    outline: 0;
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.form-control::placeholder {
    color: #666666;
    font-style: italic;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #afafaf;
    opacity: 1;
}

.form-control-agb {
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
    background-color: var(--white);
    border-radius: 200px;
    height: 55px;
    line-height: 55px;
    padding-left: 1rem;
}

/* disable ugly blue bootstrap focus */
.form-check-input:focus {
    outline: 0;
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

/**
 *
 * jquery validate
 *
 */
[id$='-error'] {
    background-color: var(--orange);
    z-index: 2;
    position: absolute;
    margin-top: -6.6rem;
    margin-left: 3rem;
    padding: 0.5rem;
    border-radius: 100px;
    font-size: 0.8rem;
    white-space: nowrap;
    color: var(--txt-color);
}

[id$='-error']:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 20px 10px 0;
    border-color: var(--orange) transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -12px;
    left: 30px;
    transform: rotate(12deg);
}

#agb-error {
    margin-top: -3rem;
    line-height: 20px;
}

/**
 *
 * Homepage
 *
 */
.slogan {
    width: 60%;
    margin-left: 2rem;
}

.vergleich-eingabe {
    min-height: 420px;
    min-width: 80%;
    max-width: 80%;
    float: right;
    margin-left: auto !important;
    margin-right: auto !important;
}

.bw_vid {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 1em;
    position: relative;
    z-index: 9999;
}

#table {
    font-size: 0.82rem;
}

#table th:last-child {
    width: 60px;
}

#table th:first-child {
    width: 250px;
}

#table tr:hover {
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d() */
    /* transform: scale(1.02, 1.02); */
    /*     transform: scale3d(1.02, 1.02, 1.02);
    transition: transform 400ms ease-out; */
}

#table tr {
    /*  transition: transform 400ms ease-out; */
}

.loading-wrap {
    display: none;
}

.form-check-input {
    cursor: pointer;
}

/**
*
* Footer
*
*/
#circle {
    background-color: #15171d;
    width: 70px;
    height: 70px;
    text-align: center;
    border-radius: 70px;
    border: 1px solid #4a4d56;
    font-size: 0.7rem;
    padding: 7px;
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.modal.custom .modal-dialog {
    width: 35%;
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 0;
}

.modal-content {
    border-radius: 0;
    border-top-left-radius: 30px;
}

.modal-body {
    padding: 0;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}

/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {
    .modal.custom .modal-dialog {
        width: 50%;
    }
}

/* small mobile :320px. */
@media (max-width: 767px) {
    .modal.custom .modal-dialog {
        width: 70%;
    }
}

/**
*
* Page Create
*
*/
.hdl-orange {
    color: var(--dashboard-header) !important;
    margin-left: 5px;
}

.hdl-dark {
    color: #7ec0ca !important;
    margin-left: 5px;
}

/* small mobile :320px. */
@media (max-width: 767px) {
    .hdl-orange {
        font-size: 1.2rem !important;
        text-align: center;
    }

    .hdl-dark {
        font-size: 1.2rem !important;
        text-align: center;
    }
}

.capitalize {
    text-transform: capitalize;
}

::-webkit-input-placeholder {
    /* WebKit browsers */
    text-transform: none;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    text-transform: none;
}

::placeholder {
    /* Recent browsers */
    text-transform: none;
}

.pricekreis {
    position: absolute;
    top: -30px;
    right: -15px;
    font-size: 1.6rem;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    background: #f9930d;
    border-radius: 100%;
    width: 90px;
    height: 90px;
    text-align: center;
    z-index: 2;
    transform: rotate(10deg);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (max-width: 767px) {
    .pricekreis {
        right: -8px;
    }
}

.preis-wrapper {
    line-height: 70px;
    margin-top: -10px;
}

sup {
    color: white;
}

.card {
    background-color: #576a19;
    min-height: 300px;
    margin-bottom: 1rem;
}

.card .fal,
.card .fab {
    margin-right: 15px;
}

/**
 *
 * Material Toggle Btn
 *
 */
.toggle {
    color: var(--white);
    cursor: pointer;
    display: inline-block;
    font-size: 1.6rem;
    margin: 0 0 2rem;
    padding: 0 0 0 6rem;
    position: relative;
    width: 100%;
}

.toggle input {
    display: none;
}

.toggle input:checked + .roundbutton {
    background-color: #e15d10;
}

.toggle input:checked + .roundbutton:before {
    transform: translate(1.7rem);
}

.toggle .roundbutton {
    background-color: #1d1f25;
    border-radius: 3.4rem;
    bottom: 0;
    cursor: pointer;
    height: 2.2rem;
    left: 0;
    right: 0;
    top: 0;
    width: 4rem;
    font-size: 10px;
    font-weight: bold;
}

.toggle .roundbutton,
.toggle .roundbutton:before {
    display: block;
    position: absolute;
    transition: all 0.3s;
}

.toggle .roundbutton:before {
    background-color: var(--white);
    border-radius: 100%;
    bottom: 0.4rem;
    content: '';
    height: 1.4rem;
    left: 0.5rem;
    width: 1.4rem;
}

/**
*
* Page: u_account
*
*/
#u_account .schritt {
    display: block;
    background: #edb900;
    width: 80px;
    height: 40px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    color: var(--txt-color);
    text-align: center;
    line-height: 36px;
    font-size: 1.4rem;
    font-family: 'Raleway';
    border: 0 none;
    margin-bottom: 1rem;
    margin-left: 20px;
    margin-top: -30px;
}

#u_account .googleplay {
    width: 142px;
    height: 44px;
    margin-bottom: 0.8rem;
}

#u_account .gaapp {
    width: 140px;
    height: auto;
}

#u_account .form-control {
    padding: 0.5rem;
}

#u_account .col-form-label {
    line-height: 3;
}

#u_account .form-control::placeholder {
    color: #cccccc;
    font-style: italic;
}

#u_account .col-sm-10 {
    padding-top: 10px;
}

#u_account .col-sm-10-logo {
    padding-left: 53px;
}

/* small mobile :320px. */
@media (max-width: 767px) {
    #u_account .col-sm-10-logo {
        padding-left: 13px;
    }
}

/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {
    #u_account .col-sm-10-logo {
        padding-left: 53px;
    }
}

/* Normal desktop 991px. */
@media (min-width: 991px) {
    #u_account .col-sm-10-logo {
        padding-left: 67px;
    }
}

/* Normal desktop 1200px. */
@media (min-width: 1200px) {
    #u_account .col-sm-10-logo {
        padding-left: 75px;
    }
}

/* Normal desktop 1400px. */
@media (min-width: 1400px) {
    #u_account .col-sm-10-logo {
        padding-left: 85px;
    }
}

#u_account .form-check-input {
    height: 1.3em;
}

#u_account .form-switch .form-check-input {
    margin-top: 8px;
    margin-left: -2.3em;
    width: 2.3em;
}

#u_account .form-check-input {
    height: 1.3em;
}

#u_account .password .characters {
    padding: 1rem;
}
/**
*
*
* Dropzone
*
*
*/
.dropzone {
    max-height: 150px;
    border: 0 none;
    background: rgba(26, 26, 48, 0.5);
    padding: 0;
    margin: 0;
}

.dropzone .dz-preview.dz-image-preview {
    background: transparent;
}

.dropzone .dz-message {
    margin: 0;
}

.dropzone .dz-preview .dz-image {
    border-radius: 150px;
    width: 150px;
    height: 150px;
}

.avatar_profil_picture {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 165px;
    height: 165px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* After upload */
.avatar_profil_picture img {
    width: 165px;
    height: 165px;

    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}

.avatar_profil_picture:hover:before {
    color: #cccccc;
    font-size: 4rem;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: '\f030';
    margin-left: 8rem;
}

/**
*
* Ergebnisse, Ausgabe
*
*/
#ergebnisse a {
    color: var(--txt-color);
}

#ergebnisse p {
    line-height: 1.8rem;
}

/**
*
* Google Sterne Bewertungen
*
*/

.fa-star,
.fa-star-half-alt {
    color: #e8bd26; /*#ffc700 */
}

/**
*
*
* Page: u_agenturdetails
*
*
*/
/* #agenturdetails .form-control {
     padding: 0.5rem; 
} */

#agenturdetails .col-form-label {
    line-height: 3;
}

@media (max-width: 767px) {
    #agenturdetails .col-form-label {
        line-height: unset;
    }
}

/**
 *
 */
#agenturdetails .form-control::placeholder {
    color: #b9cc7c;
    font-style: italic;
}

#agenturdetails .col-sm-10,
#agenturdetails .col-sm-8 {
    padding-top: 10px;
}

#agenturdetails .form-check-input {
    height: 1.3em;
}

#agenturdetails .form-switch .form-check-input {
    margin-top: 8px;
    margin-left: -2.3em;
    width: 2.3em;
}

#agenturdetails .form-check-input {
    height: 1.3em;
}

#agenturdetails .form-switch .form-check-input {
    margin-top: 8px;
    margin-left: -2.3em;
    width: 2.3em;
}

#agenturdetails .nice-select {
    border: 0 none;
    color: var(--txt-color);
    border-radius: 100px;
    min-width: 230px;
}

/* small mobile :320px. */
@media (max-width: 767px) {
    #agenturdetails .nice-select {
        width: 100%;
        min-width: 100%;
    }
}

/**
*
*
* Page: impressum
*
*
*/
#impressum a {
    color: var(--txt-color);
}

#impressum {
    height: 100%; /* vh */
}

/**
 *
 *
 * Page: kontakt
 *
 *
 */
#kontakt a {
    color: var(--txt-color);
}

#kontakt {
    height: 100%; /* vh */
}

/**
 *
 *
 * Page: u_preise
 *
 *
 */
#u_preise .form-control {
    padding: 0.5rem;
}

#u_preise .col-form-label {
    line-height: 3;
}

/* Schalte hässliche Pfeile im Number Feld ab */
#u_preise .form-control {
    -moz-appearance: textfield;
}

/* #u_preise .nav-item {
    margin-bottom: 1rem;
}
 */
/**
 *
 * Page: u_dashboard
 *
 */
#u_dashboard .card {
    width: 18rem;
    background: var(--white);
    border-radius: 20px;
    min-height: 320px;
    margin-bottom: 1rem;
    border: 0 none;
}

#u_dashboard .card p {
    color: #333;
}

#u_dashboard .card a {
    color: #333;
    text-decoration: underline;
}

#u_dashboard .hdl {
    font-size: 1.6rem;
}

#table th:first-child {
    width: 100px;
}

#table th:last-child {
    width: 200px;
}

/**
 *
 * Mobile
 *
 */
@media only screen and (max-width: 768px) {
    #u_dashboard .card {
        /* width: 17rem; */
        width: 100%;
    }
}

.glow-on-hover {
    width: 100px;
    height: 100px;
    border: none;
    outline: none;
    color: var(--txt-color);
    background: #cccccc;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, var(--white) b00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000;
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #cccccc;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/**
 *
 * Page: u_anfragen
 *
 */
#u_anfragen .col-form-label {
    line-height: 3;
}

#table th:first-child {
    width: 100px;
}

#table th:last-child {
    width: 100px;
}

/**
 *
 * Page: u_membership
 *
 */
#u_membership .card {
    background-color: #cccccc;
}

#u_membership .form-check .form-check-input {
    float: unset;
}

#u_membership .form-check-input {
    height: 2rem;
}

#u_membership .form-switch .form-check-input {
    width: 4rem;
}

/**
 *
 * Page faq und u_faq
 *
 */
details summary h2 {
    font-size: 1.2rem;
}

details summary {
    cursor: pointer;
    background: #cccccc;
    padding: 1rem;
    border-radius: 1em;
    margin-bottom: 1.5rem;
}

details summary > * {
    display: inline;
}

/* https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal */
details[open] summary ~ * {
    animation: sweep 0.5s ease-in-out;
}

@keyframes sweep {
    0% {
        opacity: 0;
        margin-left: -10px;
    }

    100% {
        opacity: 1;
        margin-left: 0px;
    }
}

/**
 *
 * back
 *
 */
.back {
    color: #666;
    font-size: 1rem;
    text-decoration: underline;
    cursor: pointer;
}

.bw-alert-center-bottom {
    margin-left: auto;
    line-height: 22px;
    margin-right: auto;
    width: 50%;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

@media only screen and (max-width: 768px) {
    .bw-alert-center-bottom {
        width: 95%;
    }
}

/**
 *
 * Page: passreset
 *
 */
#passreset {
    background: var(--dashboard-bakground);
}

#passreset .fa-form {
    display: block;
    width: 50px;
    text-align: center;
    position: absolute;
    background: rgb(134, 133, 133);
    height: 40px;
    border-radius: 20px 0 0 20px;
    line-height: 40px;
    z-index: 1;
    color: white;
}

#passreset .fa-form-52 {
    border-radius: 57px 0 0 56px;
    height: 57px;
    line-height: 57px;
}

/**
 *
 * Bootstrap Tooltip
 *
 */
.tooltip-main {
    margin: 4px 121px 0 5px;
}

.tooltip-qm {
    margin: -2px 0px 3px 4px;
}

.tooltip-inner {
    padding: 10px 15px 10px 20px;
    font-family: Raleway;
    letter-spacing: 1px;
}

.tooltip.show {
    opacity: 0.97;
}

/* Spezifische Einstellungen für Tooltips */
.tooltip-green .tooltip-inner {
    background-color: #1b363a;
}

.tooltip-clementine .tooltip-inner {
    display: grid;
    place-items: center;

    max-width: 400px;
    width: 400px;
    max-height: 165px;
    height: 165px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    background-image: url('/assets/img/clementine/tante-clementine-min.png');
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;

    padding-left: 120px;
    text-align: center;
    background-color: #1b363a;
}

@media (max-width: 767px) {
    .tooltip-clementine .tooltip-inner {
        max-width: 300px;
        width: 300px;
        max-height: 123px;
        height: 123px;
        padding-left: 90px;
    }
}

.tooltip-clementine-big .tooltip-inner {
    display: grid;
    place-items: center;

    max-width: 500px;
    width: 500px;
    max-height: 200px;
    height: 200px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    background-image: url('../img/clementine/tante-clementine-min.png');
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;

    padding-left: 120px;
    text-align: center;
    background-color: #1b363a;
}

@media (max-width: 767px) {
    .tooltip-clementine-big .tooltip-inner {
        max-width: 400px;
        width: 400px;
        max-height: 165px;
        height: 165px;
        padding-left: 90px;
    }
}

.tooltip-account-user .tooltip-inner {
    font-size: 0.75rem;
    text-align: left !important;
    font-weight: normal;
    max-width: 250px;
    width: 250px;
    max-height: 82px;
    height: 82px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding-left: 50px;
    padding-top: 20px;
    background-color: #1b363a;
}

@media (max-width: 767px) {
    .tooltip-account-user .tooltip-inner {
        max-width: 200px;
        width: 200px;
        max-height: 65px;
        height: 65px;
        padding-left: 40px;
        padding-top: 15px;
    }
}

.fa-bw-u-account-tooltip {
    margin-left: 2px;
    margin-right: 1px;
}

.tooltip-log-off .tooltip-inner {
    font-size: 0.75rem;
    background-color: #1b363a;
}
/** 
 *
 * Sidebar
 *
 */
#sidebar {
    box-shadow: rgba(0, 0, 0, 0.35) -10px 10px 10px;
}

#sidebar p {
    font-size: 0.8rem;
    line-height: 1.3rem;
}

@media (max-width: 767px) {
    #sidebar {
        box-shadow: none;
        margin-bottom: 1rem;
    }
}

/**
 *
 * Page: agenturen
 * Timify
 *
 */
.timify {
    display: block;
    width: 100%;
    height: 570px;
    border: 0 none;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

#wrapperTimify {
    margin: 0 auto;
    margin-top: 1rem;
    display: none;
    width: 80%;
}

@media (max-width: 767px) {
    #wrapperTimify {
        width: 100%;
    }
}

/* Big screen */
@media (min-width: 1200px) {
    #wrapperTimify {
        width: 50%;
    }
}

/**
 *
 * Model Homepage
 *
 */
.blurAgencyName {
    filter: blur(10px);
    transition: filter 0.3s ease;
}

.blur {
    filter: blur(2px);
    transition: filter 0.3s ease;
}

#NoRequestModal {
    z-index: 9999;
}

#NoRequestModal .modal-dialog {
    z-index: 9999;
}

.modal-backdrop.show {
    z-index: 9998;
}

.modal-header {
    border-bottom: none;
}

.modal-content {
    border: none;
    border-radius: 16px;
    animation: fadeInUp 0.5s ease-out;
    border: 1px solid #cccccc;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 25%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.btn-close-white {
    filter: invert(1);
}

.modal-footer .btn-outline-primary {
    padding: 0.5rem 1.5rem;
    transition: background-color 0.3s, color 0.3s;
}

.modal-footer .btn-outline-primary:hover {
    background-color: #4e54c8;
    color: #fff;
    border-color: #4e54c8;
}

.modal-title .fas {
    font-size: 1.5rem;
}

/**
 *
 * Animations
 *
 */

/**
 *
 * Shake
 *
 */
@keyframes shake {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-10px);
    }

    40% {
        transform: translateX(10px);
    }

    60% {
        transform: translateX(-10px);
    }

    80% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

/**
 *
 * Lightbulb
 *
 */
@keyframes glow {
    0% {
        opacity: 1;
    }

    5% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    74% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    84% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* -----------------------------------
   MVP paid/free split (Decision Screen, Upgrade Bar, gesperrte Preise)
----------------------------------- */
/* The decision screen only ever renders on the RESULTS background, and that
   background is white.
   .background-above-the-fold-ergebnis-ausgabe sets `background: var(--white)`
   plus hintergrund-lead.jpg, and that photo is a flat near-white: sampled
   across the whole image its luminance is 242 at every percentile, darkest to
   brightest. So there is no scroll position and no viewport where something
   dark sits behind this text.

   It was var(--white), which made the headline invisible on every path that
   renders it. Two earlier fixes scoped an override to .ps-decision-card and to
   .ps-free-notice, which covered the copy INSIDE the cards and left this
   headline, which sits above them, still white on white. Fixing the base rule
   rather than adding a third override, because the base rule was the bug.

   The card-scoped overrides below stay: they are now redundant for colour but
   they are what makes the intent survive someone changing this line back. */
.ps-decision-headline {
    color: var(--txt-color);
}

.ps-decision-card .ps-decision-headline,
.ps-free-notice .ps-decision-headline {
    color: var(--txt-color);
}

.ps-decision-card {
    background: var(--white);
    color: var(--txt-color);
    border-radius: 16px;
}

.ps-decision-consent {
    max-width: 320px;
    font-size: 0.8rem;
}

/* Paid unlock is white on the brand header teal (#26474c). Dark text on
   the pale orange/mint made FREISCHALTEN the quietest control on a card
   whose job is to be clicked. White on --dashboard-header is the pair
   the rest of the product already uses (headers, checkout price) and
   it is well over 7:1.
   Free stays the site orange. Painting "Kostenlos fortfahren" the same
   as "Preise freischalten" would make the free path look like the paid
   one. */
.ps-btn-unlock {
    background: var(--dashboard-header);
    color: var(--white);
}

.ps-btn-free {
    background: var(--orange);
    color: var(--txt-color);
}

.ps-btn-call {
    background: var(--orange);
    color: var(--txt-color);
}

/* The upgrade-bar CTA is a full .btn (nowrap by default); allow it to wrap
   so a narrow auto column cannot clip the label. Same override on the
   why-paid modal: jquery-confirm adds .btn, so the same 6px line-height
   and overflow:hidden clip the two-line label there too. */
#psUpgradeBar .ps-btn-unlock,
.jconfirm.ps-why-paid .jconfirm-buttons .ps-btn-unlock {
    /* Wrapping is allowed so a narrow column cannot clip the label, but the
       global .btn pins line-height at 6px, so a second line lands on top of
       the first. Overlap is not overflow, so the width guard cannot see it.
       Both properties belong together. */
    white-space: normal;
    /* !important is required, not stylistic. The global .btn sets
       `line-height: 0.5 !important`, and no amount of specificity beats
       !important, so the plain `line-height: 1.3` this rule used to carry was
       silently discarded: the two lines of "PREISE FREISCHALTEN FÜR 149 €"
       rendered on top of each other INSIDE the pill. Overlap is not overflow,
       which is why a width-based check cannot see it and only looking does.
       Same reason for the padding: .btn's `min(27px, 2em)` shorthand carries
       the same priority. */
    line-height: 1.3 !important;
    height: auto !important;
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
}

/* The bar is already --dashboard-header. A filled teal pill on a teal
   bar disappears. The white ring keeps the CTA a visible target
   without inventing a second bar colour.

   The why-paid modal is the same trap: a dark box, a teal pill, and the
   one control the box exists to sell reads as another panel. Orange is
   not available as the answer here, that is the free path (.ps-btn-free),
   so the modal takes the ring the bar already proved. Verstanden below it
   is transparent text, so the ring is also what ranks the two. */
#psUpgradeBar .ps-btn-unlock,
.jconfirm.ps-why-paid .jconfirm-buttons .ps-btn-unlock {
    box-shadow: inset 0 0 0 2px var(--white);
}

/*
 * Why-paid modal: the approved copy is taller than a laptop viewport.
 * jquery-confirm sizes the content pane in JS, then the site .btn
 * (overflow hidden, nowrap, 6px line-height) plus dark-theme
 * `float: right` stacks the two CTAs. The orange pill sits on
 * VERSTANDEN; "ANDEN" is what remains. Seen live 2026-08-22.
 *
 * The box stops at the viewport. The copy scrolls. Both buttons stay
 * fully visible, stacked, so one cannot cover the other.
 */
.jconfirm.ps-why-paid .jconfirm-box {
    /* jquery-confirm places the box at offsetTop 40 and keeps
       offsetBottom 40. 100vh - 32px still poked 8px past the fold.
       border-box: padding must sit INSIDE the cap, or Verstanden
       hangs past the fold on a phone. */
    box-sizing: border-box;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.jconfirm.ps-why-paid .jconfirm-title-c {
    flex: 0 0 auto;
}

.jconfirm.ps-why-paid .jconfirm-content-pane {
    /* jquery-confirm writes an inline height. Without !important the
       pane keeps that height and the flex layout cannot shrink it, so
       the buttons fall off the viewport again. */
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden;
    overflow-y: auto;
}

.jconfirm.ps-why-paid .jconfirm-buttons {
    flex: 0 0 auto;
    float: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.jconfirm.ps-why-paid .jconfirm-buttons button {
    width: 100%;
    margin: 0;
}

.jconfirm.ps-why-paid .jconfirm-buttons .ps-btn-unlock {
    overflow: visible;
}

.jconfirm.ps-why-paid .jconfirm-buttons .ps-btn-unlock::before {
    content: none;
}

.jconfirm.ps-why-paid .jconfirm-buttons button:not(.ps-btn-unlock) {
    background: transparent;
    color: var(--white);
    white-space: normal;
    line-height: 1.3 !important;
    height: auto !important;
    overflow: visible;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}

.jconfirm.ps-why-paid .jconfirm-buttons button:not(.ps-btn-unlock)::before {
    content: none;
}

/*
 * The approved Why-Paid copy is marked up: bold figures, underlined
 * exclusivity, a real list. Global `li { list-style: none }` and
 * `ul { padding: 0 }` flatten that to a wall of text. Seen 2026-08-22
 * against the source document.
 */
.jconfirm.ps-why-paid .jconfirm-content ul {
    list-style: disc;
    margin: 0.5em 0 1em 1.25em;
    padding: 0;
}

.jconfirm.ps-why-paid .jconfirm-content li {
    list-style: disc;
    display: list-item;
    margin: 0.35em 0;
}

.jconfirm.ps-why-paid .jconfirm-content u {
    text-decoration: underline;
}

/* .btn:hover pins color to --txt-color with !important, and .btn::before
   sweeps --orange-dark across the pill. Without these two, hover turns
   the new teal CTA back into dark-on-orange. */
.ps-btn-unlock:hover,
.btn.ps-btn-unlock:hover {
    background: #1a3539;
    color: var(--white) !important;
}

.btn.ps-btn-unlock::before {
    background: #1a3539;
}

.ps-btn-free:hover,
.ps-btn-call:hover {
    background: var(--orange-dark);
    color: var(--txt-color);
}

.ps-price-locked {
    color: var(--white);
    font-size: 1.6rem;
}

/* The per-card unlock sits in the narrow price column, so it must wrap
   inside it instead of overflowing the card edge like a full-width CTA. */
/* Standalone on purpose, NOT .btn: the global pill fixes line-height at 6px,
   hides overflow and carries padding sized for one short word, so any longer
   label clips or overlaps. This button owns its whole appearance. */
.ps-btn-unlock-card {
    display: block;
    overflow-wrap: anywhere;
    width: 100%;
    border: none;
    border-radius: 24px;
    background: var(--dashboard-header);
    color: var(--white);
    padding: 10px 6px;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: normal;
    cursor: pointer;
}

.ps-btn-unlock-card:hover {
    background: #1a3539;
    color: var(--white);
}

/* Standalone, NOT .btn. .blog_area a:hover clips the orange onto the
   glyphs and sets -webkit-text-fill-color: transparent, so a homepage
   pill in the article body becomes an empty orange blob. .btn also
   freezes line-height at 6px with overflow hidden. This link has to
   stay an <a href="/"> and still show Vergleich kostenlos starten. */
.ps-artikel-funnel-cta,
.blog_area a.ps-artikel-funnel-cta,
.blog_area a.ps-artikel-funnel-cta:hover {
    display: inline-block;
    background: var(--orange);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-text-fill-color: var(--txt-color);
    color: var(--txt-color);
    border-radius: 200px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    padding: 1.1rem 1.6rem;
    cursor: pointer;
}

.blog_area a.ps-artikel-funnel-cta:hover {
    background: var(--orange-dark);
    -webkit-text-fill-color: var(--txt-color);
    color: var(--txt-color);
}

.blog_item .ps-artikel-funnel-cta,
.blog_area .blog_item a.ps-artikel-funnel-cta {
    padding: 0.75rem 1.3rem;
}

/* What happens after the free choice: same card language as the decision
   screen, so the two ends of the flow read as one surface. */
/* A quiet link inside the upgrade bar: it explains a charge, so it must be
   readable without competing with the CTA next to it. */
/* Standalone, NOT .btn. The global pill forces uppercase, bold and letter
   spacing, which turned a quiet explanatory link into a second shouting CTA
   beside the real one. This is a sentence, so it looks like one. */
.ps-btn-link {
    display: block;
    background: none;
    border: none;
    padding: 0;
    color: var(--white);
    text-decoration: underline;
    font-size: 0.8rem;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    text-align: left;
    line-height: 1.4;
    cursor: pointer;
}

.ps-btn-link:hover {
    color: var(--white);
    opacity: 0.85;
}

/* ...but the same link now also sits on the WHITE decision card, where white
   text is invisible. This is the SECOND time this exact bug appeared on this
   screen: the headline had it, was fixed, and then the "Warum kosten die
   Preise etwas?" link was added into the same white card and inherited it.
   Both fixes are the same shape and are kept together so the next thing put
   in that card is checked against them. The base rule stays correct for the
   dark upgrade bar, which is where this link was born. */
.ps-decision-card .ps-btn-link,
.ps-free-notice .ps-btn-link {
    color: var(--txt-color);
}

.ps-decision-card .ps-btn-link:hover,
.ps-free-notice .ps-btn-link:hover {
    color: var(--txt-color);
    opacity: 0.7;
}

/* Info rows under the results box. Were floated 2rem icons with mb-3, which
   left the text wrapping around a glyph taller than its own line and the three
   columns sitting at different heights. Flex aligns icon and text on one
   baseline row and keeps the columns even. */
.ps-info-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.ps-info-item i {
    font-size: 2rem;
    color: #cccccc;
    flex: 0 0 32px;
    text-align: center;
}

.ps-free-notice {
    background: var(--white);
    color: var(--txt-color);
    border-radius: 16px;
}

/* Call-now on the free notice. Same wrap fix as #psUpgradeBar .ps-btn-unlock:
   the global .btn pins line-height at 6px. Orange, not teal: this is not
   the paid unlock. */
#psFreeNotice .ps-btn-call {
    white-space: normal;
    line-height: 1.3 !important;
    height: auto !important;
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
    display: inline-block;
    text-decoration: none;
}

.ps-call-hours {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    opacity: 0.75;
    text-align: center;
}

.ps-call-hours:empty {
    display: none;
}

#psUpgradeBar {
    background: var(--dashboard-header);
    color: var(--white);
    border-radius: 16px;
}

/* Decision screen feature comparison. The mark is meaning, not decoration:
   .ps-feature-sr carries the state for a screen reader while the glyph is
   aria-hidden. Only "Preise vergleichen" differs between the two cards. */
.ps-decision-sub { color: var(--txt-color); opacity: .85; margin-bottom: 1rem; }
.ps-feature-list { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid #e9edf2; }
.ps-feature-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .25rem; border-bottom: 1px solid #e9edf2; }
.ps-feature-mark { flex: 0 0 24px; height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: .9rem; line-height: 1; font-weight: bold; }
.ps-feature-yes { background: #28a745; color: #fff; }
.ps-feature-no { background: transparent; color: #dc3545; border: 1.5px solid #dc3545; }
.ps-feature-label { color: var(--txt-color); text-align: left; }
.ps-feature-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ps-decision-note { display: flex; align-items: center; gap: .6rem; background: #f5f7fa; border-radius: 8px; padding: .8rem .9rem; margin-bottom: 1rem; font-size: .82rem; line-height: 1.45; text-align: left; color: var(--txt-color); }
.ps-decision-note-icon { flex: 0 0 18px; height: 18px; border-radius: 50%; border: 1.5px solid #9aa7b4; color: #9aa7b4; display: flex; align-items: center; justify-content: center; font-size: .68rem; font-style: italic; font-weight: bold; margin-top: .1rem; }
.ps-feature-badge { margin-left: auto; background: #28a745; color: #fff; border-radius: 100px; padding: .18rem .6rem; font-size: .68rem; font-weight: 600; line-height: 1.35; white-space: nowrap; }
/* The badge is the only thing that can make a row two lines, so the row wraps
   and the badge lines up under the label rather than under the tick. */
.ps-feature-row { flex-wrap: wrap; }
.ps-decision-note .ps-btn-link { display: inline; font-size: .82rem; margin-top: .35rem; }
/* Circular play thumb on the paid decision note. Not .btn: that class pins
   line-height and overflow hidden and would clip the portrait. */
.ps-decision-video { flex: 0 0 72px; width: 72px; height: 72px; padding: 0; margin: 0; border: 0; background: transparent; border-radius: 50%; overflow: visible; cursor: pointer; line-height: 0; color: inherit; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.ps-decision-video img { width: 72px; height: 72px; border-radius: 50%; display: block; object-fit: cover; }
.ps-decision-video-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.ps-decision-video-modal[hidden] { display: none; }
.ps-decision-video-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.ps-decision-video-dialog { position: relative; width: min(880px, 100%); z-index: 1; }
.ps-decision-video-dialog video { width: 100%; border-radius: 8px; background: #000; display: block; }
.ps-decision-video-close { position: absolute; top: -12px; right: -12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 2; }
.ps-decision-video-close:hover { background: rgba(0,0,0,.8); }
@media (max-width: 575.98px) {
    .ps-decision-video,
    .ps-decision-video img { width: 64px; height: 64px; }
    .ps-decision-video { flex-basis: 64px; }
    .ps-decision-video-modal { padding: .75rem; }
    .ps-decision-video-close { top: 4px; right: 4px; }
}
@media (max-width: 575.98px) { .ps-feature-badge { margin-left: 2.4rem; margin-top: .3rem; } }
/* Durable access link on the paid results. break-all: a 64-char token has no
   break points, and a phone must not scroll sideways for it. */
.ps-access-url { word-break: break-all; color: var(--txt-color); text-decoration: underline; }
.ps-access-hint { font-size: .8rem; opacity: .85; }
.jconfirm.ps-why-paid .ps-why-paid-video { display: block; width: 100%; padding: 0; margin: 0 0 1rem; border: 0; background: transparent; cursor: pointer; line-height: 0; }
.jconfirm.ps-why-paid .ps-why-paid-video img { width: 100%; height: auto; display: block; border-radius: 8px; }
.pscard .ps-btn-link { display: block; width: 100%; margin-top: .5rem; text-align: center; font-size: .7rem; color: var(--txt-color); }
.pscard .ps-btn-link:hover { color: var(--txt-color); opacity: .7; }

/*
 * Phone: the approved copy plus a full 16:9 thumb is taller than a
 * 667px viewport. jquery-confirm also keeps 50px holder padding, so the
 * first paint was a poster and a title, and FREISCHALTEN sat under the
 * fold. Cap the thumb, drop the chrome, keep the stacked buttons on
 * screen. 100vh - 80px on the box stays for desktop (PsWhyPaidModalFits).
 */
@media (max-width: 575.98px) {
    /* The plugin is a vertically-centered table. A box at 100dvh - 16px
       then starts above the fold (measured top: -60). Flatten the table
       so the box sits at the top and both buttons stay on screen. */
    .jconfirm.ps-why-paid .jconfirm-scrollpane,
    .jconfirm.ps-why-paid .jconfirm-row,
    .jconfirm.ps-why-paid .jconfirm-cell {
        display: block;
        height: auto;
        width: 100%;
    }
    .jconfirm.ps-why-paid .jconfirm-holder {
        /* jquery-confirm writes offsetTop (40) as inline padding. */
        padding: 8px 0 !important;
    }
    .jconfirm.ps-why-paid .jconfirm-box {
        top: 0 !important;
        max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        width: calc(100% - 16px);
        max-width: none;
        margin: 0 auto;
        padding: 0.7rem 0.85rem 0.5rem;
    }
    .jconfirm.ps-why-paid .jconfirm-title {
        font-size: 1.05rem;
        line-height: 1.25;
    }
    .jconfirm.ps-why-paid .jconfirm-content {
        font-size: 0.88rem;
        line-height: 1.45;
    }
    .jconfirm.ps-why-paid .ps-why-paid-video {
        margin-bottom: 0.6rem;
    }
    .jconfirm.ps-why-paid .ps-why-paid-video img {
        max-height: 112px;
        object-fit: cover;
        object-position: center 18%;
    }
    .jconfirm.ps-why-paid .jconfirm-buttons {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}
#telefonkontakt-error { margin-top: -3rem; line-height: 20px; }