.account-page {
    --account-cream: #f4efe3;
    --account-ink: #18323c;
    --account-muted: #695f57;
    --account-green: #4f7e68;
    --account-orange: #e66317;
    min-height: 70vh;
    background: var(--account-cream);
    color: var(--account-ink);
}

.account-hero {
    padding: 72px 20px 96px;
    background: linear-gradient(135deg, #315f50, #4f7e68);
    color: #fff;
    text-align: center;
}

.account-hero-inner {
    width: min(720px, 100%);
    margin: 0 auto;
}

.account-domino-stone {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    object-fit: contain;
}

.account-kicker,
.account-eyebrow {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.account-hero h1 {
    margin: 0 0 12px;
    color: #fff;
    font-family: "Baloo", "Segoe UI", Arial, sans-serif;
    font-size: clamp(46px, 7vw, 72px);
}

.account-hero p { margin: 0; color: rgba(255,255,255,.9); font-size: 18px; }
.account-content { width: min(760px, calc(100% - 32px)); margin: -54px auto 0; padding-bottom: 84px; position: relative; }
.account-card { padding: 40px; border-top: 8px solid var(--account-green); border-radius: 10px; background: #fff; box-shadow: 0 16px 42px rgba(24,50,60,.14); }
.account-eyebrow { color: var(--account-green); }
.account-card h2 { margin: 0 0 28px; color: var(--account-ink); font-family: "Baloo", "Segoe UI", Arial, sans-serif; font-size: clamp(30px, 4vw, 42px); }
.success-card { text-align: center; }
.success-card .ui-messages { text-align: left; }
.success-note { max-width: 590px; margin: 0 auto; color: var(--account-muted); font-size: 17px; line-height: 1.65; }
.success-card .login-actions { justify-content: center; }
.account-form { width: min(560px, 100%); margin: 0 auto; }
.account-form .row { margin-bottom: 18px; }
.account-form .formlabel { margin-bottom: 7px; color: var(--account-ink); font-weight: 800; }
.account-form .form-control { width: 100% !important; min-height: 50px; padding: 11px 14px; border: 2px solid rgba(24,50,60,.14); border-radius: 8px; background: #fbfaf6; box-shadow: none; }
.account-form .form-control:focus { border-color: var(--account-green); background: #fff; box-shadow: 0 0 0 4px rgba(79,126,104,.14); }
.login-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(24,50,60,.14); }
.login-actions .btn,
.login-actions .ui-button { width: auto !important; min-height: 48px; margin: 0; padding: 11px 22px; border-radius: 999px; font-weight: 800; }
.login-actions .account-submit { border: 2px solid var(--account-green); background: var(--account-green); color: #fff; }
.login-actions .account-submit:hover,
.login-actions .account-submit:focus { border-color: var(--account-orange); background: var(--account-orange); color: #fff; }
.login-actions .account-secondary { border: 2px solid var(--account-ink); background: #fff; color: var(--account-ink); }
.login-actions .account-link-button { border: 2px solid transparent; background: transparent; color: var(--account-green); }
.login-actions .account-secondary:hover,
.login-actions .account-link-button:hover { border-color: var(--account-orange); background: var(--account-orange); color: #fff; }

@media (max-width: 575px) {
    .account-hero { padding: 54px 18px 82px; }
    .account-card { padding: 28px 20px; }
    .login-actions .btn,
    .login-actions .ui-button { width: 100% !important; }
}

/* Benutzerdaten bearbeiten */
.edit-user-content { width: min(820px, calc(100% - 32px)); }
.edit-user-card { width: 100%; }
.edit-user-form { max-width: 640px; }
.edit-user-form .col-md-9,
.edit-user-form .col-md-12 { width: 100%; padding-right: 0; padding-left: 0; }
.edit-user-form .form-control,
.edit-user-form input[type="text"] { width: 100% !important; max-width: none; }
.edit-user-form .checklist { margin: 30px 0 22px; color: var(--account-ink); font-family: "Baloo", "Segoe UI", Arial, sans-serif; font-size: clamp(26px, 4vw, 36px); }
.edit-user-form .ui-chkbox { margin-right: 7px; }
.membership-status { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(24,50,60,.14); }
.membership-badge { display: inline-flex; gap: 9px; align-items: center; padding: 9px 14px; border-radius: 999px; font-weight: 800; }
.membership-badge span { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; color: #fff; }
.membership-badge.is-paid { background: rgba(79,126,104,.13); color: #315f50; }
.membership-badge.is-paid span { background: var(--account-green); }
.membership-badge.is-open { background: rgba(230,99,23,.12); color: #9a3f0b; }
.membership-badge.is-open span { background: var(--account-orange); }

/* Profil */
.profile-content {
    width: min(1120px, calc(100% - 32px));
    margin: -54px auto 0;
    padding-bottom: 84px;
    position: relative;
}

.profile-content .account-card + .account-card { margin-top: 28px; }
.profile-actions-card { max-width: 760px; margin-right: auto; margin-left: auto; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.profile-action { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 11px 22px; border: 2px solid var(--account-green); border-radius: 999px; font-weight: 800; text-decoration: none; }
.profile-action-primary { background: var(--account-green); color: #fff; }
.profile-action-secondary { background: #fff; color: var(--account-green); }
.profile-action:hover,
.profile-action:focus { border-color: var(--account-orange); background: var(--account-orange); color: #fff; text-decoration: none; }
.profile-courses-card { overflow: hidden; }
.profile-table-wrap { width: 100%; overflow-x: auto; padding-bottom: 4px; }
.profile-courses-form { min-width: 820px; }
.profile-courses-card .ui-datatable { margin-top: 8px; border-radius: 8px; overflow: hidden; }
.profile-courses-card .ui-datatable thead th { padding: 12px 10px; background: var(--account-green); color: #fff; border-color: rgba(255,255,255,.18); }
.profile-courses-card .ui-datatable tbody td { padding: 11px 10px; background: #fff; color: var(--account-ink); }
.profile-courses-card .ui-paginator { padding: 12px; background: #f7f3ea; border-color: rgba(24,50,60,.12); }
.profile-info-card { border-top: 8px solid #e0b220; }
.profile-info-card h3 { margin: 0 0 8px; color: var(--account-ink); font-family: "Baloo", "Segoe UI", Arial, sans-serif; font-size: 25px; }
.profile-info-card p { margin: 0 0 24px; color: var(--account-muted); line-height: 1.65; }
.profile-info-card p:last-child { margin-bottom: 0; }

@media (max-width: 575px) {
    .profile-content .account-card { padding: 28px 20px; }
    .profile-action { width: 100%; }
}