/*****************************************************************************************************************************************************
 * Self-Service | Kundenseite
 *****************************************************************************************************************************************************/

.selfService_container {
    max-width: 720px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

.selfService_header h2 {
    margin-bottom: 10px;
}

.selfService_divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 30px 0;
}

.selfService_action {
    margin-bottom: 30px;
    margin-top: 16px;
}

.selfService_action h3 {
    margin: 0 0 10px 0;
}

.selfService_box {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 25px 30px;
    margin: 25px 0;
    background-color: #fff;
}

.selfService_box h3 {
    margin: 0 0 10px 0;
}

.selfService_box--info {
    border-left: 4px solid var(--bfvpm-primary, #1d4e81);
    background-color: var(--bfvpm-primary-faint, #f5f8fb);
}

.selfService_box--error {
    border-left: 4px solid #c0392b;
    background-color: #fdf3f2;
}

.selfService_result {
    border-radius: 6px;
    padding: 20px 25px;
    margin: 25px 0;
}

.selfService_result--success {
    border-left: 4px solid #2e7d32;
    background-color: #f1f8f2;
}

.selfService_result--error {
    border-left: 4px solid #c0392b;
    background-color: #fdf3f2;
}

.selfService_result p {
    margin: 0;
}

.selfService_fieldset {
    border: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.selfService_fieldset legend {
    font-weight: bold;
    padding: 0;
    margin-bottom: 10px;
}

.selfService_option {
    display: block;
    padding: 12px 15px;
    margin-bottom: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
}

.selfService_option:hover {
    border-color: var(--bfvpm-primary, #1d4e81);
}

.selfService_option--disabled {
    background-color: #f7f7f7;
    color: #909090;
    cursor: not-allowed;
}

.selfService_option--disabled:hover {
    border-color: #e0e0e0;
}

.selfService_option input {
    margin-right: 10px;
}

.selfService_option_hint {
    display: block;
    margin-top: 4px;
    padding-left: 26px;
    font-size: 13px;
    font-style: italic;
}

.selfService_notice {
    font-size: 14px;
    background-color: #fdf8e9;
    border-left: 4px solid #f7bb22;
    padding: 12px 15px;
    margin: 20px 0;
}

.selfService_button {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    background-color: var(--bfvpm-primary, #1d4e81);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

.selfService_button:hover {
    background-color: var(--bfvpm-primary-dark, #163c64);
}

.selfService_alternative {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 18px 25px;
    margin-bottom: 25px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: var(--bfvpm-primary-faint, #f7fafd);
}

.selfService_alternative_text {
    margin: 0;
    font-size: 14px;
}

/* Der Button traegt sonst den Standard-Abstand nach oben und saesse in der Zeile schief */
.selfService_alternative .selfService_button {
    margin-top: 0;
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .selfService_alternative {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
}

.selfService_button--secondary {
    background-color: #fff;
    color: var(--bfvpm-primary, #1d4e81);
    border: 2px solid var(--bfvpm-primary, #1d4e81);
    text-decoration: none;
}

.selfService_button--secondary:hover {
    background-color: var(--bfvpm-primary, #1d4e81);
    color: #fff;
    text-decoration: none;
}

.selfService_grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 12px 15px;
    margin-bottom: 20px;
}

/* Spaltenbreiten im 10er-Raster: 7+3 ergibt 70/30, 3+7 ergibt 30/70 */
.selfService_field--s3  { grid-column: span 3; }
.selfService_field--s5  { grid-column: span 5; }
.selfService_field--s7  { grid-column: span 7; }
.selfService_field--s10 { grid-column: span 10; }

.selfService_label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: bold;
}

.selfService_input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
}

.selfService_input:focus {
    border-color: var(--bfvpm-primary, #1d4e81);
    outline: none;
}

.selfService_field--error .selfService_input {
    border-color: #c0392b;
    background-color: #fdf3f2;
}

.selfService_fieldError {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #c0392b;
}

@media (max-width: 560px) {
    .selfService_field--s3,
    .selfService_field--s5,
    .selfService_field--s7 {
        grid-column: span 10;
    }
}

.selfService_result--info {
    border-left: 4px solid var(--bfvpm-primary, #1d4e81);
    background-color: var(--bfvpm-primary-faint, #f5f8fb);
}

.selfService_compare {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 15px;
}

.selfService_compare th,
.selfService_compare td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: top;
}

.selfService_compare thead th {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #666;
    border-bottom-width: 2px;
}

.selfService_compare tbody th {
    width: 28%;
    font-weight: bold;
}

.selfService_compare--changed td:last-child {
    background-color: #f1f8f2;
    font-weight: bold;
}

.selfService_compare_empty {
    color: #909090;
}

@media (max-width: 560px) {
    .selfService_compare th,
    .selfService_compare td {
        padding: 6px 6px;
        font-size: 14px;
    }
}

/* Buttonleiste: Zweit-Button links, Absende-Button rechts.
   Bei nur einem Button steht dieser wie bisher links. */
.selfService_formActions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* Elementor setzt globale Button-Stile mit ".elementor-kit-N button" (Spezifitaet 0,1,1) und
   schlaegt damit eine einfache Klasse. Der Container hebt uns auf 0,2,0. */
.selfService_container .selfService_button {
    background-color: var(--bfvpm-primary, #1d4e81);
    color: #fff;
    border: 2px solid var(--bfvpm-primary, #1d4e81);
}

.selfService_container .selfService_button:hover {
    background-color: var(--bfvpm-primary-dark, #163c64);
    border: 2px solid var(--bfvpm-primary-dark, #163c64);
    color: #fff;
}

.selfService_container .selfService_button--secondary {
    background-color: #fff;
    color: var(--bfvpm-primary, #1d4e81);
    border: 2px solid var(--bfvpm-primary, #1d4e81);
    text-decoration: none;
}

.selfService_container .selfService_button--secondary:hover {
    background-color: var(--bfvpm-primary-soft, #eef3f8);
    color: var(--bfvpm-primary, #1d4e81);
    border: 2px solid var(--bfvpm-primary, #1d4e81);
}

.selfService_title {
    margin: 0 0 12px 0;
}

.selfService_greeting {
    margin: 0 0 4px 0;
}

.selfService_intro {
    margin: 0 0 20px 0;
}

.selfService_download {
    margin: 20px 0 0 0;
}


/*****************************************************************************************************************************************************
 * Absende-Zustand: gesperrter Button mit Ladeanimation
 *
 * Der Button behaelt seine Breite, damit die Seite beim Umschalten nicht springt.
 *****************************************************************************************************************************************************/
.selfService_button--busy {
    cursor: progress;
    opacity: .75;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.selfService_button[disabled] {
    cursor: not-allowed;
}

.selfService_spinner {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: bfvpmSpin .7s linear infinite;
}

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

/* Wer Bewegung reduziert haben moechte, bekommt ein Pulsieren statt der Drehung. */
@media (prefers-reduced-motion: reduce) {
    .selfService_spinner {
        animation: bfvpmPulse 1.4s ease-in-out infinite;
    }
    @keyframes bfvpmPulse {
        0%, 100% { opacity: 1; }
        50%      { opacity: .35; }
    }
}

.selfService_sendingHint {
    margin: 10px 0 0;
    font-size: 13px;
    color: #666;
}