:root {
    color-scheme: light;
    --bg: #f4f7f6;
    --panel: #ffffff;
    --text: #1d2528;
    --muted: #5d6b70;
    --accent: #176b5d;
    --accent-dark: #0f4f45;
    --border: #d9e2df;
    --error-bg: #fdecec;
    --error-text: #9f1d1d;
    --success-bg: #e8f6ef;
    --success-text: #13683f;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.auth-shell,
.page-shell {
    width: min(920px, calc(100% - 32px));
    margin: 0 auto;
    padding: 48px 0;
}

.auth-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
}

.auth-login-shell {
    width: min(1040px, calc(100% - 40px));
    padding: 48px 0;
}

body.login-page { background: #ffffff; }

.portal-home-button {
    justify-self: end;
    margin: 0 0 14px;
    border: 1px solid #d8e0ea;
    border-radius: 999px;
    background: #ffffff;
    color: #003c7c;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(0, 60, 124, 0.08);
}

.portal-home-button:hover {
    border-color: #58c925;
    color: #58c925;
    text-decoration: none;
}

.login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    align-items: center;
    gap: 64px;
    width: 100%;
    border: 16px solid #f4f7fb;
    border-radius: 2px;
    background: linear-gradient(135deg, #f1f7ff 0%, #ffffff 52%, #f1ffe8 100%);
    padding: 60px 48px;
}

.login-intro { display: grid; gap: 22px; }

.login-badge {
    justify-self: start;
    border-radius: 999px;
    background: #ddf8d2;
    color: #1f8a00;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(92, 191, 35, 0.16);
}

.login-intro h1 {
    margin: 0;
    color: #003c7c;
    font-size: clamp(40px, 5vw, 58px);
    line-height: 1.04;
}

.login-intro p {
    max-width: 560px;
    margin: 0;
    color: #123b68;
    font-size: 18px;
    line-height: 1.65;
}

.login-benefits {
    display: grid;
    gap: 14px;
    margin: 8px 0 0;
    padding: 0;
    color: #001f44;
    font-size: 16px;
    font-weight: 700;
    list-style: none;
}

.login-benefits li { display: flex; align-items: center; gap: 12px; }
.login-benefits li::before {
    display: grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: #ddf8d2;
    color: #1f8a00;
    content: "✓";
    font-weight: 800;
}

.panel {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    padding: 28px;
    box-shadow: 0 10px 24px rgba(29, 37, 40, 0.08);
}

.auth-panel { max-width: 420px; }
.wide-panel { max-width: 760px; margin: 0 auto; }

.login-card {
    max-width: none;
    border-color: #d8e0ea;
    border-radius: 14px;
    background: #f7f9fc;
    padding: 40px;
    box-shadow: none;
}

.login-card h2 {
    margin: 0 0 8px;
    color: #003c7c;
    font-size: 32px;
    line-height: 1.15;
    text-align: center;
}

.login-card-text {
    margin: 0 0 26px;
    color: #123b68;
    text-align: center;
}

h1 { margin: 0 0 18px; font-size: 28px; line-height: 1.2; }
p { color: var(--muted); line-height: 1.5; }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 70px;
    padding: 0 24px;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    font-weight: 700;
}

.brand-link { display: inline-flex; align-items: center; gap: 12px; color: var(--text); }
.brand-link:hover { text-decoration: none; }
.brand-link img { display: block; width: 180px; height: auto; }

.auth-logo { display: flex; justify-content: center; margin: 0 0 18px; }
.auth-logo img { width: min(260px, 100%); height: auto; }
.login-logo { margin-bottom: 24px; }
.login-logo img { width: min(280px, 100%); }

.topbar-links,
.dashboard-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dashboard-actions { flex-wrap: wrap; margin-top: 20px; }

.notice-box {
    display: grid;
    gap: 10px;
    margin: 22px 0 4px;
    border: 1px solid #b7dfd1;
    border-radius: 8px;
    background: var(--success-bg);
    padding: 16px;
}

.notice-box p { margin: 0; }
.notice-box .button-link { justify-self: start; }

.form-stack { display: grid; gap: 16px; }
.login-form { gap: 18px; }

label {
    display: grid;
    gap: 7px;
    color: var(--text);
    font-weight: 700;
}

.login-form label { color: #001f44; }

input,
textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    font: inherit;
}

input { min-height: 42px; }
textarea { min-height: 120px; resize: vertical; }

.login-form input {
    min-height: 52px;
    border-color: #e1e5eb;
    border-radius: 10px;
    background: #e4e8ee;
    padding: 0 16px;
    color: #001f44;
}

input:focus,
textarea:focus {
    border-color: var(--accent);
    outline: 3px solid rgba(23, 107, 93, 0.14);
}

.login-form input:focus {
    border-color: #58c925;
    box-shadow: 0 0 0 4px rgba(88, 201, 37, 0.16);
    outline: 0;
}

.password-field {
    display: grid;
    grid-template-columns: 1fr 42px;
    align-items: stretch;
}

.password-field input { border-radius: 6px 0 0 6px; }
.login-form .password-field { grid-template-columns: 1fr 52px; }
.login-form .password-field input { border-radius: 10px 0 0 10px; }

.password-toggle {
    min-height: 42px;
    width: 42px;
    border: 1px solid var(--border);
    border-left: 0;
    border-radius: 0 6px 6px 0;
    background: #ffffff;
    color: var(--accent);
    padding: 0;
    font-size: 17px;
}

.login-form .password-toggle {
    min-height: 52px;
    width: 52px;
    border-color: #e1e5eb;
    border-radius: 0 10px 10px 0;
    background: #e4e8ee;
    color: #003c7c;
    font-size: 18px;
}

.password-toggle:hover {
    border-color: var(--accent);
    background: var(--success-bg);
    color: var(--accent-dark);
}

button,
.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 0;
    border-radius: 6px;
    background: var(--accent);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 10px 16px;
}

button:hover,
.button-link:hover {
    background: var(--accent-dark);
    text-decoration: none;
}

.login-form > button[type="submit"] {
    width: 100%;
    min-height: 52px;
    margin-top: 6px;
    border-radius: 999px;
    background: #58c925;
    color: #ffffff;
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.login-form > button[type="submit"]:hover {
    background: #4fba20;
    box-shadow: 0 10px 22px rgba(88, 201, 37, 0.22);
    transform: translateY(-1px);
}

.secondary-button {
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--accent);
}

.secondary-button:hover {
    border-color: var(--accent);
    background: var(--success-bg);
    color: var(--accent-dark);
}

.danger-button { background: #b42318; }
.danger-button:hover { background: #8f1c13; }

.message {
    border-radius: 6px;
    padding: 10px 12px;
    font-weight: 700;
}

.message.error { background: var(--error-bg); color: var(--error-text); }
.message.success { background: var(--success-bg); color: var(--success-text); }

.copy-week-form { display: flex; justify-content: flex-end; margin: 0 0 18px; }
.availability-form { display: grid; gap: 12px; }
.availability-grid { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(260px, 360px); gap: 12px; align-items: center; }
.grid-head { color: var(--muted); font-size: 14px; }
.availability-day { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(260px, 360px) 42px; gap: 12px; align-items: start; }
.time-slots { display: grid; gap: 8px; }
.time-slot { display: grid; grid-template-columns: minmax(105px, 1fr) minmax(105px, 1fr) 42px; gap: 8px; }
.icon-button { min-width: 42px; width: 42px; padding: 0; font-size: 22px; line-height: 1; }
.icon-button:disabled { cursor: not-allowed; opacity: 0.45; }
.info-box { margin-top: 12px; }

.profile-list { display: grid; gap: 12px; margin: 0; }
.profile-list div { display: grid; gap: 4px; }
.profile-list dt { color: var(--muted); font-weight: 700; }
.profile-list dd { margin: 0; font-size: 17px; }

.appointments-list { display: grid; gap: 12px; }
.appointment-card { display: grid; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 16px; background: #ffffff; }
.appointment-card div:first-child { display: flex; justify-content: space-between; gap: 16px; }
.appointment-card p { margin: 0; }
.appointment-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.status-text { color: var(--muted); font-weight: 700; }
.success-text { color: var(--success-text); }
.error-text { color: var(--error-text); }

.action-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
}

.secondary-link { font-weight: 700; }
.centered-link { justify-self: center; }
.forgot-password-link { color: #003c7c; font-size: 14px; }
.forgot-password-link:hover { color: #58c925; }
.update-note { margin: 4px 0 0; color: var(--muted); font-size: 14px; text-align: right; }

@media (max-width: 620px) {
    .auth-login-shell { width: min(100% - 28px, 980px); padding: 28px 0; }
    .portal-home-button { justify-self: center; }
    .login-layout { grid-template-columns: 1fr; gap: 28px; border-width: 10px; padding: 28px 18px; }
    .login-intro { gap: 16px; }
    .login-intro h1 { font-size: 36px; }
    .login-intro p { font-size: 16px; }
    .panel.login-card { padding: 28px 22px; }
    .login-card h2 { font-size: 28px; }
    .login-logo img { width: min(240px, 100%); }
    .panel { padding: 22px; }
    .availability-grid,
    .availability-day,
    .grid-head { grid-template-columns: 1fr; }
    .availability-day { gap: 8px; }
    .time-slot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px; }
    .grid-head { display: none; }
    .action-row { align-items: stretch; flex-direction: column-reverse; }
    .update-note { text-align: left; }
    .topbar { align-items: flex-start; flex-direction: column; gap: 8px; padding: 12px 24px; }
    .brand-link img { width: 160px; }
    .topbar-links,
    .dashboard-actions,
    .appointment-card div:first-child,
    .appointment-actions { align-items: stretch; flex-direction: column; }
}

/* ------------------------------------------------------------
   FahrPlan Easy Portal Design Refresh
   Stand: optimiert für die Portal-Subdomain
   ------------------------------------------------------------ */
:root {
    --fpe-blue: #071B34;
    --fpe-blue-soft: #123B68;
    --fpe-green: #6BCB2D;
    --fpe-green-dark: #5DBB24;
    --fpe-bg: #F5F7FA;
    --fpe-muted: #5B6B7C;
    --fpe-border: #DCE3EA;
    --fpe-card-shadow: 0 24px 60px rgba(7, 27, 52, 0.12);
    --fpe-soft-shadow: 0 16px 42px rgba(7, 27, 52, 0.08);
}

body,
body.login-page {
    background: #ffffff;
    color: var(--fpe-blue);
    font-family: Arial, Helvetica, sans-serif;
}

body.login-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 18%, rgba(107, 203, 45, 0.10), transparent 28%),
        radial-gradient(circle at 88% 30%, rgba(7, 27, 52, 0.08), transparent 30%),
        linear-gradient(135deg, #F5F9FF 0%, #FFFFFF 46%, #F0FFE8 100%);
}

.portal-auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1120px, calc(100% - 40px));
    min-height: 76px;
    margin: 0 auto;
    padding: 12px 0;
}

.portal-auth-brand {
    display: inline-flex;
    align-items: center;
}

.portal-auth-brand:hover { text-decoration: none; }

.portal-auth-brand img {
    display: block;
    width: 170px;
    height: auto;
}

.portal-home-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: auto;
    margin: 0;
    min-height: 42px;
    border: 1px solid var(--fpe-border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--fpe-blue);
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(7, 27, 52, 0.08);
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.portal-home-button:hover {
    border-color: var(--fpe-blue);
    background: var(--fpe-blue);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(7, 27, 52, 0.18);
    transform: translateY(-1px);
}

.auth-shell {
    display: grid;
    width: min(1080px, calc(100% - 40px));
    min-height: calc(100vh - 76px);
    margin: 0 auto;
    padding: 28px 0 52px;
    place-items: center;
}

.auth-login-shell {
    width: min(1080px, calc(100% - 40px));
}

.login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    align-items: center;
    gap: 70px;
    width: 100%;
    border: 0;
    border-radius: 28px;
    background:
        radial-gradient(circle at 95% 15%, rgba(107, 203, 45, 0.13), transparent 30%),
        linear-gradient(135deg, #F5F9FF 0%, #FFFFFF 48%, #F1FFE9 100%);
    padding: 72px 64px;
    box-shadow: 0 28px 80px rgba(7, 27, 52, 0.08);
}

.login-intro {
    display: grid;
    gap: 24px;
}

.login-badge {
    justify-self: start;
    border-radius: 999px;
    background: #EAF8DF;
    color: #2F7D12;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(107, 203, 45, 0.16);
}

.login-intro h1 {
    max-width: 520px;
    margin: 0;
    color: #004080;
    font-size: clamp(42px, 5vw, 62px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.login-intro p {
    max-width: 540px;
    margin: 0;
    color: var(--fpe-blue);
    font-size: 18px;
    line-height: 1.7;
}

.login-benefits {
    display: grid;
    gap: 15px;
    margin: 8px 0 0;
    padding: 0;
    color: var(--fpe-blue);
    font-size: 16px;
    font-weight: 800;
    list-style: none;
}

.login-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-benefits li::before {
    display: grid;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 999px;
    background: #EAF8DF;
    color: #2F7D12;
    content: "✓";
    font-weight: 900;
}

.panel.login-card,
.login-card {
    max-width: none;
    border: 1px solid var(--fpe-border);
    border-radius: 24px;
    background: #ffffff;
    padding: 42px 40px;
    box-shadow: var(--fpe-card-shadow);
}

.auth-logo,
.login-logo {
    display: flex;
    justify-content: center;
    margin: 0 0 24px;
}

.auth-logo img,
.login-logo img {
    width: min(260px, 100%);
    height: auto;
}

.login-card h2 {
    margin: 0 0 10px;
    color: #004080;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    letter-spacing: -0.02em;
}

.login-card-text {
    max-width: 290px;
    margin: 0 auto 28px;
    color: var(--fpe-blue-soft);
    font-size: 16px;
    line-height: 1.55;
    text-align: center;
}

.form-stack { gap: 18px; }
.login-form { gap: 18px; }

label,
.login-form label {
    color: var(--fpe-blue);
    font-weight: 800;
}

input,
textarea,
.login-form input {
    border: 1px solid var(--fpe-border);
    border-radius: 12px;
    background: #ffffff;
    color: var(--fpe-blue);
    font: inherit;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

input { min-height: 50px; }
.login-form input {
    min-height: 52px;
    padding: 0 16px;
}

input:focus,
textarea:focus,
.login-form input:focus {
    border-color: var(--fpe-green);
    outline: 0;
    box-shadow: 0 0 0 4px rgba(107, 203, 45, 0.16);
}

.password-field {
    display: grid;
    grid-template-columns: 1fr 52px;
    align-items: stretch;
}

.password-field input,
.login-form .password-field input {
    border-radius: 12px 0 0 12px;
}

.password-toggle,
.login-form .password-toggle {
    min-height: 52px;
    width: 52px;
    border: 1px solid var(--fpe-border);
    border-left: 0;
    border-radius: 0 12px 12px 0;
    background: #ffffff;
    color: #004080;
    font-size: 17px;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.password-toggle:hover,
.login-form .password-toggle:hover {
    border-color: var(--fpe-green);
    background: #F1FFE9;
    color: var(--fpe-green-dark);
}

button,
.button-link {
    border-radius: 999px;
    background: var(--fpe-green);
    color: #ffffff;
    font-weight: 800;
    transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

button:hover,
.button-link:hover {
    background: var(--fpe-green-dark);
    box-shadow: 0 10px 22px rgba(107, 203, 45, 0.25);
    text-decoration: none;
    transform: translateY(-1px);
}

.login-form > button[type="submit"] {
    width: 100%;
    min-height: 52px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--fpe-green);
    color: #ffffff;
    font-size: 16px;
}

.login-form > button[type="submit"]:hover {
    background: var(--fpe-green-dark);
    box-shadow: 0 10px 22px rgba(107, 203, 45, 0.25);
    transform: translateY(-1px);
}

.secondary-link,
.forgot-password-link {
    color: var(--fpe-blue);
    font-size: 14px;
    font-weight: 800;
    transition: color 180ms ease;
}

.secondary-link:hover,
.forgot-password-link:hover {
    color: var(--fpe-green);
    text-decoration: none;
}

.message {
    border-radius: 12px;
    padding: 12px 14px;
    font-weight: 800;
}

.message.error { background: #FDECEC; color: #9F1D1D; }
.message.success { background: #EAF8DF; color: #2F7D12; }

@media (max-width: 860px) {
    .portal-auth-header {
        width: min(100% - 32px, 1080px);
    }

    .portal-auth-brand img { width: 150px; }

    .auth-shell,
    .auth-login-shell {
        width: min(100% - 28px, 1080px);
        padding: 24px 0 40px;
    }

    .login-layout {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 42px 24px;
    }

    .login-intro h1 { font-size: clamp(34px, 10vw, 48px); }
    .login-intro p { font-size: 16px; }
    .panel.login-card { padding: 34px 24px; }
}

@media (max-width: 520px) {
    .portal-auth-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        padding: 16px 0 8px;
    }

    .portal-home-button {
        min-height: 40px;
        padding: 10px 18px;
    }

    .login-layout {
        border-radius: 22px;
        padding: 30px 18px;
    }

    .login-benefits { font-size: 15px; }
    .login-card h2 { font-size: 28px; }
    .auth-logo img, .login-logo img { width: min(230px, 100%); }
}