/**
 * Ribbon "kostenlos und unverbindlich"
 * Für korrekte Positionierung oben rechts in .pflegeWrapper und .vergleich-eingabe
 */
.ribbon-kostenlos-und-unverbindlich {
    position: absolute;
    top: -8px;
    right: -12px;
    width: 120px;
    height: auto;
    z-index: 1;
}

/* Sicherstellen, dass die Container relative Positionierung haben */
.pflegeWrapper {
    position: relative !important;
}

#vergleich .vergleich-eingabe {
    position: relative !important;
}

/* Bootstrap Breakpoints für ribbon-kostenlos-und-unverbindlich */
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .ribbon-kostenlos-und-unverbindlich {
        /* Wie auf allen anderen Breiten (und wie im Original): das Band
           haengt ueber die Kartenecke, die Falz umschliesst die Ecke.
           right:0 war die Reaktion auf 8px Querscrollen, sah aber wie
           aufgeklebt aus, weil die Schraege die Kante nicht mehr trifft.
           Das Scrollen loest jetzt das overflow-clip unten, nicht die
           Verschiebung des Bands. */
        top: -8px;
        right: -12px;
    }

    /* Der Bandzipfel ragt 12px ueber die Karte, die auf dem Telefon den
       Schirm fuellt. Clip statt Scrollbalken: die Seite bleibt exakt
       Schirmbreite, der Zipfel endet an der Kante wie ueberall sonst an
       der Kartenkante des Desktops. */
    body {
        overflow-x: clip;
    }

    /* Die Punktreihe und die Frage weichen dem Band aus, statt darunter zu
       verschwinden: der letzte (aktive!) Punkt lag auf jedem Telefon unter
       dem Band, mit vergroesserter Systemschrift gleich mehrere. Links
       buendig, kleiner, und rechts so viel Luft wie das Band breit ist,
       dann holt keine Schriftskalierung die Punkte mehr ein.

       Die Reihe steht hier drei Mal, weil sie im Bogen drei Schreibweisen
       hat. .ps-step-dots kam mit #233 dazu und traf keinen dieser Waehler,
       also fiel die Gasse still weg und Punkt 6 und 7 lagen wieder unter
       dem Band (auf 320px der aktive). Wer die Reihe umbenennt, nimmt ihr
       diese Regel weg: PsRibbonDodgeCoversTheStepDotsTest haelt beides
       zusammen. Der .pflegeform-Prefix ist Absicht, er schlaegt das
       text-align:center aus dem <style> in lead.html. */
    .pflegeform .pflegeform-inputfield > .ps-step-dots:first-child,
    .pflegeform-inputfield > .text-center:first-child,
    .pflegeform-inputfield > center:first-child {
        text-align: left;
        padding-right: 100px;
        /* Luft zur Kartenoberkante: direkt an der Kante klebte der
           Fortschritt am Kartenrand und unter der Bandschraege. */
        padding-top: 0.9rem;
        font-size: 0.65em;
        margin-left: 0 !important;
    }
    .pflegeform .pflegeform-inputfield > .ps-step-dots:first-child .fa-circle,
    .pflegeform-inputfield > .text-center:first-child .fa-circle,
    .pflegeform-inputfield > center:first-child .fa-circle {
        margin-right: 12px;
    }
    /* Die erste Frage jedes Schritts beginnt unterhalb der Bandkante,
       damit eine lange Ueberschrift nicht in die Schraege laeuft. */
    .pflegeform-inputfield h2:first-of-type {
        padding-right: 84px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .ribbon-kostenlos-und-unverbindlich {
        top: -7px;
        right: -12px;
    }
}

/* Tablets (768-991px): die Karte ist dort die schmale rechte Spalte, exakt
   die Telefon-Geometrie. Ohne die Gasse wickelten die Punkte auf zwei
   Zeilen und die Frage lief in die Bandschraege (Deep-Sweep 30.08.). */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pflegeform .pflegeform-inputfield > .ps-step-dots:first-child,
    .pflegeform-inputfield > .text-center:first-child,
    .pflegeform-inputfield > center:first-child {
        text-align: left;
        padding-right: 100px;
        padding-top: 0.9rem;
        font-size: 0.65em;
        margin-left: 0 !important;
    }
    .pflegeform .pflegeform-inputfield > .ps-step-dots:first-child .fa-circle,
    .pflegeform-inputfield > .text-center:first-child .fa-circle,
    .pflegeform-inputfield > center:first-child .fa-circle {
        margin-right: 12px;
    }
    .pflegeform-inputfield h2:first-of-type {
        padding-right: 84px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ribbon-kostenlos-und-unverbindlich {
        right: -12px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ribbon-kostenlos-und-unverbindlich {
        right: -12px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .ribbon-kostenlos-und-unverbindlich {
        right: -12px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1400px) {
    .ribbon-kostenlos-und-unverbindlich {
        right: -12px;
    }
}