/* Preisseite ?page=pro (Modul Pro) */
.pro-page { background: var(--color-bg); }

.pro-public-bar .pro-login-btn { text-decoration: none; }

.pro-main {
    max-width: 880px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

.pro-title { margin: 0 0 0.25rem; font-size: 1.8rem; }
/* Ausgeloggt: kurz sagen, was PaperExam ist (die Startadresse der App zeigt diese Seite) */
.pro-intro { margin: 0 0 0.75rem; font-size: 1.05rem; max-width: 60ch; }
.pro-subtitle { margin: 0 0 0.5rem; color: var(--color-text-muted); font-size: 1.05rem; }
.pro-invoice { margin: 0 0 1.5rem; font-weight: 600; }

.pro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.pro-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1.5rem 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
}

.pro-card-featured { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }

.pro-badge {
    position: absolute;
    top: -0.7rem;
    right: 1.25rem;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.pro-card-name { margin: 0 0 0.6rem; font-size: 1.2rem; }
.pro-card-price { margin: 0; line-height: 1; }
.pro-amount { font-size: 2.4rem; font-weight: 700; }
.pro-currency { margin-left: 0.3rem; color: var(--color-text-muted); }
.pro-card-period { margin: 0.25rem 0 0; color: var(--color-text-muted); }
.pro-card-alt { margin: 0.1rem 0 0; color: var(--color-text-muted); font-size: 0.9rem; }

.pro-features {
    margin: 1rem 0 1.25rem;
    padding-left: 1.2rem;
    flex: 1;
}
.pro-features li { margin-bottom: 0.35rem; }

.pro-btn { display: inline-block; text-align: center; text-decoration: none; }
.pro-buttons { display: flex; flex-direction: column; gap: 0.5rem; }
.pro-current { font-weight: 600; color: var(--color-primary); }
.pro-until, .pro-soon { display: block; margin-top: 0.3rem; color: var(--color-text-muted); font-size: 0.9rem; }

.pro-note { margin: 1.75rem 0 0.5rem; font-size: 0.85rem; color: var(--color-text-muted); }
.pro-links { font-size: 0.85rem; }

@media (max-width: 700px) {
    .pro-grid { grid-template-columns: 1fr; }
}

/* Knöpfe wie in den Modulen (dort je eigene Definition): Primär und Umriss */
.pro-page .btn-primary {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.pro-page .btn-primary:hover { background: var(--color-primary-hover); }

.pro-page .btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.pro-page .btn-outline:hover { background: #e8effc; }

.pro-public-bar .pro-login-btn { padding: 0.4rem 0.9rem; font-size: 0.875rem; }