.demo-button {
    margin: 2rem auto 5rem auto;
    background: var(--pv-button-bg-color);
    color: var(--pv-button-text-color);
    border: none;
    border-radius: var(--pv-button-border-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--pv-button-font-weight);
    font-size: var(--pv-font-h5-size);
    font-family: var(--pv-button-font-family);
    padding: 14px 32px;
    box-shadow: var(--pv-shadow-primary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.demo-button i {
    margin-left: 10px;
    transition: transform 0.3s ease;
    font-size: var(--pv-font-h4-size);
}

.demo-button:hover {
    background: var(--pv-button-bg-color-hover);
    box-shadow: var(--pv-shadow-primary-sm);
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

/* ── Scoped: btn-Klassen in Planvigo-Containern (page wrapper) ────────────
   Mit !important gegen Theme-Overrides abgesichert.
   ──────────────────────────────────────────────────────────────────────── */
.planvigo_container .btn,
.pv-container .btn,
#planvigo-page-wrapper .btn,
.wrap .btn {
    padding: var(--pv-button-padding-vertical) var(--pv-button-padding-horizontal) !important;
    border: var(--pv-button-border-width-normal) solid var(--pv-button-border-color-normal) !important;
    border-radius: var(--pv-button-border-radius) !important;
    font-weight: var(--pv-button-font-weight) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: var(--pv-button-font-size) !important;
    font-family: var(--pv-button-font-family) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.planvigo_container .btn-primary,
.pv-container .btn-primary,
#planvigo-page-wrapper .btn-primary,
.wrap .btn-primary {
    background: var(--pv-button-bg-color) !important;
    color: var(--pv-button-text-color) !important;
    border: none !important;
    box-shadow: none !important;
}

.planvigo_container .btn-primary:hover,
.pv-container .btn-primary:hover,
#planvigo-page-wrapper .btn-primary:hover,
.wrap .btn-primary:hover {
    background: var(--pv-button-bg-color-hover) !important;
    box-shadow: var(--pv-shadow-primary-sm) !important;
    transform: translateY(-1px) !important;
    color: var(--pv-button-text-color) !important;
}

.planvigo_container .btn-secondary,
.pv-container .btn-secondary,
#planvigo-page-wrapper .btn-secondary,
.wrap .btn-secondary {
    background: #FFFFFF !important;
    color: var(--pv-color-text-primary) !important;
    border: 2px solid #E5E7EB !important;
    box-shadow: none !important;
}

.planvigo_container .btn-secondary:hover,
.pv-container .btn-secondary:hover,
#planvigo-page-wrapper .btn-secondary:hover,
.wrap .btn-secondary:hover {
    background: #F9FAFB !important;
    border-color: #D1D5DB !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
}

.planvigo_container .btn-danger,
.pv-container .btn-danger,
#planvigo-page-wrapper .btn-danger,
.wrap .btn-danger {
    background: var(--pv-color-error) !important;
    color: white !important;
    border: none !important;
    box-shadow: none !important;
}

.planvigo_container .btn-danger:hover,
.pv-container .btn-danger:hover,
#planvigo-page-wrapper .btn-danger:hover,
.wrap .btn-danger:hover {
    background: #d32f2f !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4) !important;
}

.planvigo_container .btn-primary-shadow,
.pv-container .btn-primary-shadow,
#planvigo-page-wrapper .btn-primary-shadow,
.wrap .btn-primary-shadow {
    background: var(--pv-button-bg-color) !important;
    color: var(--pv-button-text-color) !important;
    box-shadow: var(--pv-button-shadow-normal) !important;
    border: none !important;
}

.planvigo_container .btn-primary-shadow:hover,
.pv-container .btn-primary-shadow:hover,
#planvigo-page-wrapper .btn-primary-shadow:hover,
.wrap .btn-primary-shadow:hover {
    background: var(--pv-button-bg-color-hover) !important;
    box-shadow: var(--pv-button-shadow-hover) !important;
    transform: scale(1.05) !important;
}

/* ── Bulletproof Modal Buttons: ID-Spezifität (1,0,x) + !important ────────
   Modals sitzen auf body — außerhalb des page wrappers. Hier schlagen
   Themes mit generischen button-Regeln durch. Lösung: ID-Selektoren
   geben Spezifität 1,0,1 — unschlagbar gegen Theme-Klassen-Selektoren.
   ──────────────────────────────────────────────────────────────────────── */
:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .btn {
    padding: var(--pv-button-padding-vertical) var(--pv-button-padding-horizontal) !important;
    border-radius: var(--pv-button-border-radius) !important;
    font-weight: var(--pv-button-font-weight) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: var(--pv-button-font-size) !important;
    font-family: var(--pv-button-font-family) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    text-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .btn-primary {
    background: var(--pv-button-bg-color) !important;
    color: var(--pv-button-text-color) !important;
    border: none !important;
    box-shadow: none !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .btn-primary:hover {
    background: var(--pv-button-bg-color-hover) !important;
    box-shadow: var(--pv-shadow-primary-sm) !important;
    transform: translateY(-1px) !important;
    color: var(--pv-button-text-color) !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .btn-secondary {
    background: #FFFFFF !important;
    color: var(--pv-color-text-primary, #1C1C1E) !important;
    border: 2px solid #E5E7EB !important;
    box-shadow: none !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .btn-secondary:hover {
    background: #F9FAFB !important;
    border-color: #D1D5DB !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .btn-danger {
    background: var(--pv-color-error, #ef4444) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .btn-danger:hover {
    background: #d32f2f !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4) !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .btn-primary-shadow {
    background: var(--pv-button-bg-color) !important;
    color: var(--pv-button-text-color) !important;
    box-shadow: var(--pv-button-shadow-normal) !important;
    border: none !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .btn-primary-shadow:hover {
    background: var(--pv-button-bg-color-hover) !important;
    box-shadow: var(--pv-button-shadow-hover) !important;
    transform: scale(1.05) !important;
}

/* ── Wizard-Navigations-Buttons ─────────────────────────────────────────── */
:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .pv-wizard-btn-next {
    background: linear-gradient(135deg, #FF785F 0%, #ff5e42 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 10px 28px !important;
    font-size: 0.95em !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(255, 120, 95, 0.35) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .pv-wizard-btn-next:hover {
    filter: brightness(1.08) !important;
    box-shadow: 0 6px 16px rgba(255, 120, 95, 0.45) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .pv-wizard-btn-back {
    background: none !important;
    border: 2px solid #e2e8f0 !important;
    color: #64748b !important;
    border-radius: 8px !important;
    padding: 9px 20px !important;
    font-size: 0.92em !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .pv-wizard-btn-back:hover:not(:disabled) {
    border-color: #94a3b8 !important;
    color: #334155 !important;
    background: #f8fafc !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .pv-wizard-btn-back:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .pv-wizard-btn-cancel {
    background: none !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 0.88em !important;
    padding: 4px 8px !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    text-decoration: none !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .pv-wizard-btn-cancel:hover {
    color: #64748b !important;
}

/* ── Modal Close Button (✕) ─────────────────────────────────────────────── */
:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .acceptance-modal-close {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #999 !important;
    font-size: 28px !important;
    padding: 8px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: none !important;
    text-shadow: none !important;
    letter-spacing: normal !important;
}

/* ── Selected Slot Remove Button (×) ────────────────────────────────────── */
:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .modal-selected-slot-remove {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #999 !important;
    font-size: 1.3em !important;
    padding: 4px 8px !important;
    line-height: 1 !important;
    text-transform: none !important;
    text-shadow: none !important;
    letter-spacing: normal !important;
}

/* ── Wizard-Option-Buttons (Antwort-Kacheln) ────────────────────────────── */
:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .pv-wizard-option {
    background: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 10px 4px !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    text-align: center !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .pv-wizard-option:hover {
    border-color: #FF785F !important;
    background: #fff5f2 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 120, 95, 0.12) !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .pv-wizard-option.selected {
    border-color: transparent !important;
    background: linear-gradient(135deg, #FF785F 0%, #ff5e42 100%) !important;
    box-shadow: 0 4px 12px rgba(255, 120, 95, 0.35) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .pv-wizard-option.selected .pv-wizard-option-num {
    color: #fff !important;
}

:is(#playerAcceptanceModal, #trainerAcceptanceModal, #availabilityModal,
    #profileModal, #logoutFeedbackModal, [data-pv-modal]) .pv-wizard-option.selected .pv-wizard-option-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.pv-scroll-top-btn {
    position: fixed;
    right: 40px;
    bottom: 122px;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    background: var(--pv-button-bg-color);
    color: var(--pv-button-text-color);
    border: none;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
    z-index: 1000;
}

.pv-scroll-top-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.pv-scroll-top-btn:hover {
    background: var(--pv-button-bg-color-hover);
    box-shadow: var(--pv-button-shadow-hover);
}

.pv-scroll-top-btn svg {
    width: 22px;
    height: 22px;
    display: block;
}

.pv-scroll-bottom-btn {
    position: fixed;
    right: 40px;
    bottom: 60px;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    background: var(--pv-button-bg-color);
    color: var(--pv-button-text-color);
    border: none;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
    z-index: 1000;
}

.pv-scroll-bottom-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.pv-scroll-bottom-btn:hover {
    background: var(--pv-button-bg-color-hover);
    box-shadow: var(--pv-button-shadow-hover);
}

.pv-scroll-bottom-btn svg {
    width: 22px;
    height: 22px;
    display: block;
}