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

  Handcrafted pixels
  Copyright 2021-2025 by Nick

*/

@charset "UTF-8";

/* -----------------------------------
   IR Slider
----------------------------------- */
.irs {
    font-size: 1rem;
}

.irs--big,
.irs--big.irs-with-grid {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.irs-grid-text {
    font-size: 1rem;
}

/* -----------------------------------
   Vergleich
----------------------------------- */
#vergleich {
    margin: 0;
    padding: 0;
    background-color: transparent;
    font-family: Raleway, sans-serif;
    font-size: 0.9rem;
}

#vergleich h1,
#vergleich h2,
#vergleich h3 {
    color: #26474c;
}

#vergleich h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

#vergleich h4 {
    background-color: #26474c;
    color: var(--white);
    padding-left: 1rem;
    margin-top: 1rem;
}

/* -----------------------------------
   Form Steps
----------------------------------- */
.pflegeform {
    background-color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    border: 0 none;
    border-radius: 20px;
    padding: 0 1rem 1rem 1rem;
    min-height: 420px;
}

.pflegeform-rechts {
    margin-left: 1rem;
}

@media (max-width: 768px) {
    .pflegeform-rechts {
        margin-top: 1rem;
        margin-left: 0;
    }
}

.pflegeform-inputfield {
    min-height: 385px;
    margin-bottom: max(1rem, 1vw);
}

#vergleich .form-control {
    width: 95%;
    margin: 0 auto;
    font-size: 0.9rem;
    border-radius: 100px;
}

#vergleich .btn {
    min-width: 150px;
}

#vergleich .button-forward {
    float: right;
}

@media (max-width: 767px) {
    #vergleich .form-control {
        width: 100%;
        padding: 10px;
    }
    #vergleich .btn {
        min-width: 140px;
        font-size: 0.7rem;
    }
}

/* -----------------------------------
   Button Sort
----------------------------------- */
.buttonsort {
    background: #90a54e;
    color: var(--white);
    border: 0 none;
    cursor: pointer;
    margin: 1rem;
    padding: 0.7rem;
    width: 250px;
    border-radius: 3px;
    transition: 0.5s;
}

.buttonsort:hover {
    background: #6f8134;
}

@media (max-width: 768px) {
    .buttonsort {
        width: 100%;
        margin: 0 0 0.9rem 0;
    }
}

/* -----------------------------------
   Checkbox/Radio Inline
----------------------------------- */
.radio-inline {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    vertical-align: middle;
    font-weight: normal;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
}

.chbox {
    cursor: pointer;
    outline: none !important;
    position: absolute;
    margin: 5px;
    line-height: normal;
    box-sizing: border-box;
    margin-left: 150px;
    font-family: inherit;
}

/* -----------------------------------
   Labels, Prices
----------------------------------- */
.addrlabel {
    font-weight: bold;
    float: left;
    width: 90px;
}

.price {
    display: block;
    font-weight: bold;
    font-size: 1rem;
    background-color: #90a54e;
    color: var(--white);
    border-radius: 3px;
    width: 150px;
    padding: 1rem;
    margin-top: 1rem;
}

/* -----------------------------------
   Anbieter Formular
----------------------------------- */
.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: #90a54e;
}

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

.toggle .roundbutton {
    background-color: #a53417;
    border-radius: 3.4rem;
    bottom: 0;
    cursor: pointer;
    height: 2.2rem;
    left: 0;
    right: 0;
    top: 0;
    width: 4rem;
    padding-left: 30px;
    padding-top: 10px;
    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;
    position: absolute;
    transition: all 0.3s;
}

/* -----------------------------------
   Validation
----------------------------------- */
.error {
    /* place for error styles if needed */
}

/* -----------------------------------
   Ausgabe Anbieter
----------------------------------- */
#AnbieterOutput {
    font-family: Raleway, sans-serif;
    font-size: 0.8rem;
    display: block;
    width: 100%;
    padding: 30px;
    margin: 0 auto;

    /* do not mark text */
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

#AnbieterOutput .sortcol {
    padding-top: 10px;
    min-width: 350px;
}

@media (max-width: 767px) {
    #AnbieterOutput .sortcol {
        min-width: 100%;
    }
}

#AnbieterOutput .topbar {
    font-size: 1.1rem;
    font-weight: bold;
}

#AnbieterOutput .topmenu {
    border-radius: 12px;
    margin-bottom: 1rem;
    background: #26474c;
    /* min-height, not height: sized for one desktop row, the stacked mobile
       columns are taller and a fixed height let the Treffer line render on
       top of the info rows below the box. Same fix in responsive.css. */
    min-height: 100px;
    padding-top: 1rem;
    color: #ffffff;
}

#AnbieterOutput .showReviews {
    margin-left: 22px;
    text-decoration: underline;
    cursor: pointer;
}

#AnbieterOutput .showDetails {
    margin-top: 41px;
    margin-left: 22px;
    text-decoration: underline;
    cursor: pointer;
}

#AnbieterOutput .showReviewsChevron {
    margin-left: 75px;
}

#AnbieterOutput .showDetailsChevron {
    margin-left: 80px;
}

@media (max-width: 767px) {
    #AnbieterOutput .showReviews {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 767px) {
    #AnbieterOutput .showDetails {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 767px) {
    #AnbieterOutput .showReviewsChevron,
    #AnbieterOutput .showDetailsChevron {
        display: block !important;
        margin-left: auto;
        margin-right: auto;
    }
}

/**
 *
 * Sort Machine
 *
 */
.bwSortMachine {
    margin-bottom: 2rem;
}

/* -----------------------------------
   Cards
----------------------------------- */
.pscard {
    background: #f7a63d;
    border: 1px solid #cccccc;
    min-height: 160px;
    border-radius: 16px;
}

.row.pscard {
    display: flex;
    align-items: stretch; /* Alle Spalten auf gleiche Höhe bringen */
}

.ps-col001 {
    background: #cccccc;
    max-width: 150px;
    text-align: center;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
}

.ps-col002 {
    background: var(--white);
    padding: 1rem 0 0 1rem;
    border-top-right-radius: 70px 300px;
    border-bottom-right-radius: 70px 300px;
}

.pslogo {
    width: 100px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border-radius: 100%;
    -webkit-user-drag: none; /* Safari */
    -khtml-user-drag: none; /* Konqueror */
    -moz-user-drag: none; /* Firefox */
    -o-user-drag: none; /* Opera */
    user-select: none; /* Verhindert Auswählen des Bildes */
}

.ps-kuendigungsfrist {
    background: #cccccc;
    padding: 0.3rem;
    border-radius: 20px;
}

.ps-google-details {
    background: #ffffff;
    border-radius: 1em;
    margin-top: 1rem;
    padding-top: 1rem;
    height: 200px;
    overflow: auto;
}

.ps-details {
    background: #ffffff;
    border-radius: 1em;
    margin-top: 1rem;
}

.BtnSortReviewBest {
    background: #cccccc;
    padding: 3px;
    border-radius: 3px;
    cursor: pointer;
}

.ps-col-border {
    border-left: 1px solid #cccccc;
    padding: 1rem;
}

.ps-col-border_details {
    border-left: 1px solid #cccccc;
    padding: 1rem 0.8rem 1rem 1rem;
}

.fa-icon {
    margin-right: 6px;
}

#vergleich .plz {
    /* max-width: auf 320px-Geraeten ist der Wrapper nur 264px breit, und
       eine feste 300px-Breite loeste sich dort als negativer rechter Rand
       auf: das Feld ragte aus dem Schirm. */
    width: 300px;
    max-width: 100%;
}

.BtnSortReviewNewest {
    background: #cccccc;
    padding: 3px;
    border-radius: 3px;
    margin-right: 10px;
    cursor: pointer;
}

.ps-price {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    white-space: nowrap;
    font-weight: bold;
}

/* -----------------------------------
   Button Request
----------------------------------- */
.btnRequest {
    display: inline-block;
    font-size: 1rem;
    line-height: 0.8rem;
    background: var(--dashboard-header);
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    padding-top: min(13px);
    padding-bottom: min(13px);
    padding-right: min(18px);
    padding-left: min(18px);
    line-height: 1.2 !important;
    text-transform: lowercase;
}

.btnRequest:hover {
    color: var(--white) !important;
    background: var(--dashboard-header);
}

.btnRequest::before {
    background: #0e2124;
}

.btnRequest:hover::before {
    color: var(--white) !important;
}

/* -----------------------------------
   Mobile Anpassungen
----------------------------------- */
@media (max-width: 768px) {
    #AnbieterOutput {
        padding: 10px;
    }
    .ps-col001 {
        max-width: 100px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .ps-col002 {
        padding-top: 0.5rem;
    }
    .ps-col-border {
        border-left: none;
    }
    .ps-price {
        font-size: 2rem;
    }
    /*
     * Locked (and paid) cards were logo | orange, 50/50. The why-paid
     * sentence then wrapped inside a 160px column. Stack: logo, unlock
     * bar, then the details. #AnbieterOutput .ps-col001 is 50% in
     * responsive.css, so this selector has to beat it.
     */
    #AnbieterOutput .pscard > .ps-col001 {
        flex: 0 0 100%;
        max-width: 100%;
        border-radius: 13px 13px 0 0;
        padding: 0.55rem 0;
    }
    #AnbieterOutput .pscard > .order-2 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0.7rem 1rem 0.85rem !important;
    }
    #AnbieterOutput .pscard .ps-btn-unlock-card.mt-4 {
        margin-top: 0 !important;
    }
    #AnbieterOutput .pscard .ps-btn-link {
        font-size: 0.8rem;
        padding: 0.5rem 0.25rem 0.1rem;
        line-height: 1.35;
    }
}

/* -----------------------------------
   Animated Progress Circle
   By Jonatan Littke (littke.com)
----------------------------------- */
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-o-keyframes rotate {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(360deg);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.progress-circle-container {
    position: relative;
    height: 230px;
    width: 230px;
    margin: 35px auto 0;
}

.progress-circle-container .progress-circle-outer {
    background-color: #faef85;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(0deg, #90a54e, #e2ecbe);
    background-image: -webkit-linear-gradient(0deg, #90a54e, #e2ecbe);
    background-image: -o-linear-gradient(0deg, #90a54e, #e2ecbe);
    background-image: linear-gradient(0deg, #90a54e, #e2ecbe);
    width: 230px;
    height: 230px;
    position: absolute;
    -webkit-animation: rotate 2.2s infinite linear;
    -moz-animation: rotate 2.2s infinite linear;
    -o-animation: rotate 2.2s infinite linear;
    animation: rotate 2.2s infinite linear;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
    box-shadow: inset 0 2px 10px #90a54e, inset 0 0 20px #5f7220, 0 0 15px rgba(216, 140, 23, 0.25);
    border-radius: 200px;
}

.progress-circle-container .progress-circle-outer.animate {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

.progress-circle-container .progress-circle-inner {
    height: 170px;
    width: 170px;
    margin: 0 auto;
    position: absolute;
    left: 30px;
    top: 30px;
    border-radius: 200px;
    background-color: #ebeae5;
    box-shadow: inset 0 2px 1px #ffffff, inset 0 -1px 1px rgba(0, 0, 0, 0.08), inset 0 -3px 1px rgba(0, 0, 0, 0.09), 0 2px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.progress-circle-container .progress-circle-inner .number,
.progress-circle-container .progress-circle-inner .unit {
    line-height: 165px;
    color: #90a54e;
    font-size: 74px;
    font-weight: normal;
    text-shadow: 0 -1px 1px #627521, 0 1px 1px var(--white);
}

.progress-circle-container .progress-circle-inner .number {
    position: relative;
    left: 3px;
}

.progress-circle-container .progress-circle-inner .unit {
    font-size: 18px;
    text-shadow: 0 1px 1px var(--white);
    position: relative;
    left: -2px;
}

/* -----------------------------------
   Misc
----------------------------------- */
.nice-select {
    width: 100%;
    color: #000;
}

/* The real <select> is display:none behind nice-select. If anything ever
 * unhides it (the old 1px / top:30px validate workaround), it must not sit
 * on the dropdown and eat taps. */
.pflegeform select {
    pointer-events: none;
}

.form-switch .form-check-input {
    margin-top: 0;
    margin-left: 0;
}

/* -----------------------------------
   Icons, Steps
----------------------------------- */
.fa-circle {
    margin-right: 20px;
    color: #999999;
}

/* -----------------------------------
   Pflege Wrapper
----------------------------------- */
.pflegeWrapper {
    padding: 0 !important;
}

@media (max-width: 767px) {
    .pflegeWrapper {
        margin-bottom: 4rem;
    }
}

/* -----------------------------------
   Shake
----------------------------------- */
.shake {
    animation: shake 0.5s;
}
/* Wer Bewegung abgestellt hat, bekommt den roten Rand und die Meldung allein. */
@media (prefers-reduced-motion: reduce) {
    .shake {
        animation: none;
    }
}

/* -----------------------------------
   PLZ Error
----------------------------------- */
/**
 *
 * jquery validate
 *
 */
: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;
}

/**
 * Die Fehlermeldung steht UNTER ihrem Feld, in der Zeile, nicht als Blase
 * darueber.
 *
 * Vorher: position absolute, margin-top -6.6rem, feste Breite aus dem
 * Markup, Pfeil per :after. Auf dem Telefon zog das jede Meldung auf das
 * Feld DARUEBER. Auf Schritt 6 sind es sechs auf einmal, und Felix' iPhone
 * zeigte am 02.09. das Alter-Feld unter der Blase von lebensalter, das
 * Geschlecht unter der von gewicht, und die Auswahllisten unter den
 * restlichen. Gemessen: jede Blase ueberlappte mindestens ein Feld, eine
 * ueberlappte zwei.
 *
 * pointer-events: none hat das nicht geheilt, es hat nur den Tap
 * durchgelassen: sichtbar verdeckt war das Feld trotzdem, und was man nicht
 * sieht, tippt man nicht an.
 */
[id$='-error'] {
    display: block;
    position: static;
    margin: 0.35rem 0 0;
    padding: 0;
    background: none;
    border-radius: 0;
    max-width: 100%;
    white-space: normal;
    font-size: 0.8rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--bs-danger);
    /* Visible, but never the tap target. Essen (25 Aug 2026) rageclicked
     * "Geben Sie die Mobilität an." because this balloon sat on the select
     * and its for= focused the hidden native control instead of opening
     * nice-select. */
    pointer-events: none;
}

/* 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);
}

.form-check-label {
    color: black;
}

.counter-txt {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    color: #70803c;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: center;
    max-width: 100%;
    width: 300px;
    margin: 0 auto;
}

/* -----------------------------------
   Teaser zwischen Schritt 6 und 7
----------------------------------- */
/**
 * Die Karten sehen aus wie die Ergebnisliste (.pscard), nur kleiner und ohne
 * Preisspalte: dieselbe orange Kante, dieselbe graue Logoflaeche, derselbe
 * weisse Koerper. Die Familie soll sie wiedererkennen, wenn sie nach Schritt 7
 * die echte Liste sieht.
 *
 * Der Name der Agentur steht NICHT im Markup, auch nicht unscharf: der Server
 * schickt ihn gar nicht erst mit (psTeaserCards). Der graue Balken ist ein
 * Platzhalter, kein verstecktes Wort.
 */
#psTeaser {
    padding: 1rem !important;
}

/**
 * Die Gasse fuer das Band wieder zu, weil es auf diesem Schirm keins gibt.
 *
 * ribbon.css haelt fuer .pflegeform-inputfield h2:first-of-type 84px auf dem
 * Telefon frei, und das ist fuer jeden Schritt richtig. psScanRingStart
 * versteckt #ribbon fuer die ganze Zwischenzeit (die Ueberschrift ist bei
 * 375px dreizeilig und das Band wird nach unten breiter), also stand hier
 * toter Rand neben genau dem Satz, der die Zahl traegt. Wer das Band auf dem
 * Teaser zurueckholt, holt auch diese Zeile zurueck.
 */
.pflegeform .pflegeform-inputfield h2.ps-teaser-headline {
    /* Der .pflegeform-Prefix ist Absicht, genau wie bei der Punktreihe in
       ribbon.css: :first-of-type zaehlt als Klasse, also ist die Regel dort
       gleich spezifisch, und lead.css wird vor ribbon.css eingehaengt. Mit
       einer Klasse und mit zwei blieben die 84px stehen, beides im Browser
       gemessen. */
    padding-right: 0;
}


.ps-teaser-count {
    color: #70803c;
    font-weight: 700;
}

.ps-teaser-cards {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ps-teaser-card {
    background: #f7a63d;
    border: 1px solid #cccccc;
    border-radius: 16px;
    padding: 4px;
    display: flex;
    gap: 4px;
}

.ps-teaser-logo {
    width: 62px;
    flex: none;
    background: #cccccc;
    border-radius: 13px 0 0 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-teaser-body {
    flex: 1;
    min-width: 0;
    background: var(--white);
    border-radius: 0 13px 13px 0;
    padding: 9px 11px;
}

.ps-teaser-bar {
    display: inline-block;
    height: 13px;
    width: 96px;
    vertical-align: -2px;
    border-radius: 3px;
    background: linear-gradient(100deg, #8f9aa2, #c9ced2);
    filter: blur(4px);
}

.ps-teaser-logo .ps-teaser-bar {
    height: 26px;
    width: 42px;
}

.ps-teaser-name {
    font-size: 0.9rem;
    color: var(--txt-color);
}

.ps-teaser-meta {
    font-size: 0.75rem;
    color: #46555a;
    margin-top: 4px;
}

.ps-teaser-more {
    font-size: 0.8rem;
    color: #46555a;
    text-align: center;
    margin: 12px 0 0;
}

.ps-teaser-legal {
    font-size: 0.72rem;
    color: #26474c;
    text-align: center;
    margin: 0.75rem 0 0;
}

/* Ein einzelner Knopf, also die ganze Breite: die zwei Spalten der Schritte
   gibt es hier nicht, und ein rechtsbuendiger halber Knopf saehe aus, als
   fehlte daneben etwas. */
#psTeaser .button-forward {
    float: none;
    width: 100%;
}