@font-face { font-family: Inter; src: url("/fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --ink: #173634; --petrol: #187673; --mint: #e2f1ed; --line: #d3e4df; }
html, body { font-family: Inter, sans-serif; color: var(--ink); background: #f5faf9; margin: 0; }
a { color: var(--petrol); }
a:hover { color: #105451; }
:focus-visible { outline: 3px solid #479d9b; outline-offset: 3px; }
h1 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 680; letter-spacing: -.045em; line-height: 1.12; margin-bottom: 1.2rem; }
h2 { font-size: 1.55rem; font-weight: 650; letter-spacing: -.025em; }
p { line-height: 1.65; }
.app-brand { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; color: var(--ink); font-size: 28px; font-weight: 650; }
.app-brand img { height: 36px; width: auto; }
.app-bar { border-bottom: 1px solid var(--line); color: var(--ink); }
.account-header { padding: 24px max(24px, calc((100vw - 1120px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: white; }
.account-main { max-width: 1120px; margin: 0 auto; padding: 56px 24px 80px; }
.workspace-content { max-width: 1320px; margin: 0 auto; padding: 48px 40px; }
.dashboard-card { padding: 32px; border: 1px solid var(--line); border-radius: 18px !important; }
.mud-typography, .mud-button-label, .mud-input { font-family: Inter, sans-serif; }
.action-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.eyebrow { text-transform: uppercase; letter-spacing: .15em; font-size: .75rem; font-weight: 700; color: var(--petrol); }
.portal-hero { padding: 24px 0 48px; max-width: 740px; }
.portal-hero p { max-width: 600px; font-size: 1.15rem; margin-bottom: 24px; }
.portal-hero .btn + .btn { margin-left: 12px; }
.portal-empty { border: 1px solid var(--line); border-radius: 20px; padding: 32px; background: white; margin-bottom: 32px; }
.account-form { max-width: 480px; display: flex; flex-direction: column; gap: 12px; margin: 28px 0; }
.account-form label { font-weight: 600; margin-top: 8px; }
.account-form .remember { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.account-form button { margin-top: 12px; }
.account-help { color: #516b64; font-size: .9rem; max-width: 480px; }
.account-nav { display: flex; flex-direction: column; gap: 20px; margin: 24px 0; }
.account-nav .active { font-weight: 700; }
.btn-primary { background: var(--petrol); border-color: var(--petrol); color: white; }
.btn-primary:hover, .btn-primary:focus { background: #105451; border-color: #105451; color: white; }
.btn-outline-secondary { border-color: #68847a; color: var(--ink); }
.form-control:focus, .form-select:focus { border-color: var(--petrol); box-shadow: 0 0 0 .2rem #479d9b35; }
.validation-message, .invalid, .text-danger { color: #a12828; }
.system-info { display: grid; grid-template-columns: max-content 1fr; gap: 12px 28px; margin-top: 24px; overflow-wrap: anywhere; }
.system-info dd { margin: 0; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 2000; padding: 16px; background: #ffe5a8; color: #403314; }
.blazor-error-boundary { background: #a12828; color: white; padding: 16px; }
.blazor-error-boundary::after { content: "Die Ansicht konnte nicht geladen werden."; }
@media (max-width: 600px) {
    .account-header { padding: 20px; }
    .account-main, .workspace-content { padding: 32px 20px 56px; }
    .dashboard-card, .portal-empty { padding: 24px; }
    .portal-hero .btn { display: block; margin: 12px 0 !important; }
    .system-info { grid-template-columns: 1fr; gap: 4px; }
}