:root { --brand: #0d6efd; --brand-600: #0b5ed7; --bg: #f8f9fb; --text: #212529; --muted: #6c757d; --card-bg: #ffffff; --border: #e6e9ee; --radius: 12px; } /* Manuelles Theming via Datenattribut auf */ :root[data-theme="light"] { --bg: #f8f9fb; --text: #212529; --muted: #6c757d; --card-bg: #ffffff; --border: #e6e9ee; } :root[data-theme="dark"] { --bg: #0b0e12; --text: #e8eaed; --muted: #9aa0a6; --card-bg: #11161c; --border: #222a33; } html[data-theme="dark"] .table { --bs-table-color: #e2e8f0; --bs-table-bg: #0f141a; --bs-table-border-color: #27313d; --bs-table-striped-bg: #141b22; --bs-table-striped-color: var(--bs-table-color); --bs-table-active-bg: #141b22; --bs-table-active-color: var(--bs-table-color); --bs-table-hover-bg: #19222b; --bs-table-hover-color: var(--bs-table-color); } html[data-theme="dark"] .table > :not(caption) > * > * { box-shadow: inset 0 0 0 9999px var(--bs-table-bg); } @media (prefers-color-scheme: dark) { :root { --bg: #0b0e12; --text: #e8eaed; --muted: #9aa0a6; --card-bg: #11161c; --border: #222a33; } /* Hinweis: Wende die Dark-Tabellen-Variablen bei System-Dark nur dann an, wenn NICHT explizit das Light-Theme gewählt wurde. So bleibt die Tabelle im erzwungenen Light-Mode auch wirklich hell. */ html:not([data-theme="light"]) .table { --bs-table-color: #e2e8f0; --bs-table-bg: #0f141a; --bs-table-border-color: #27313d; --bs-table-striped-bg: #141b22; --bs-table-striped-color: var(--bs-table-color); --bs-table-active-bg: #141b22; --bs-table-active-color: var(--bs-table-color); --bs-table-hover-bg: #19222b; --bs-table-hover-color: var(--bs-table-color); } html:not([data-theme="light"]) .table > :not(caption) > * > * { box-shadow: inset 0 0 0 9999px var(--bs-table-bg); } } html, body { height: 100%; } body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background: radial-gradient(1200px 600px at 10% -10%, rgba(13,110,253,0.08), transparent 40%), radial-gradient(1000px 500px at 90% -20%, rgba(111,66,193,0.08), transparent 40%), var(--bg); } a, .btn-link { color: var(--brand); } a:hover { color: var(--brand-600); } .btn-primary { color: #fff; background-color: var(--brand); border-color: var(--brand); } .btn-primary:hover { background-color: var(--brand-600); border-color: var(--brand-600); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25); } .content { padding-top: 1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 2px solid #26b050; } .invalid { outline: 2px solid #e50000; } .validation-message { color: #e50000; } .card-elevated { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06); } .page-hero { border-radius: calc(var(--radius) + 8px); background: linear-gradient(180deg, rgba(13,110,253,0.08), rgba(13,110,253,0)); border: 1px solid var(--border); } .blazor-error-boundary { background: #b32121; padding: 1rem 1rem 1rem 1rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--muted); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Utility helpers */ .max-w-md { max-width: 480px; } .max-w-lg { max-width: 720px; } .max-w-xl { max-width: 960px; } /* Navbar tweaks for dark-mode contrast */ @media (prefers-color-scheme: dark) { .navbar.bg-primary { box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05); } } html[data-theme="dark"] .navbar.bg-primary { box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05); } .voucher-paper { max-width: 430px; margin: 32px auto 0 auto; padding: 2.2em 2em 1.5em 2em; background: #fffdf6; border: 3px dashed #b49b6d; border-radius: 24px; box-shadow: 0 6px 36px rgba(0,0,0,0.13), 0 1px 6px #f9e4ba inset; position: relative; } .voucher-header { text-align: center; margin-bottom: 0.5em; font-size: 1.8em; font-family: 'Pacifico', cursive, serif; color: #d09943; letter-spacing: 1px; } .voucher-decoration { display: block; } .voucher-content h2 { font-family: 'Georgia', 'serif'; text-align: center; margin-top: 0.3em; font-size: 1.45em; font-weight: bold; color: #744D16; } .voucher-image { display: block; margin: 14px auto 20px auto; max-width: 260px; border-radius: 14px; border: 2px solid #f1dfb7; } .voucher-description { font-size: 1.04em; text-align: center; margin: 12px 0 18px 0; color: #2d281b; } .voucher-dates { display: flex; justify-content: space-between; font-size: 0.96em; color: #836d40; margin-top: 16px; margin-bottom: 12px; } .voucher-footer { border-top: 1px dashed #b49b6d; margin-top: 20px; text-align: right; font-size: 1em; color: #9c7d3c; padding-top: 8px; font-family: 'Caveat', cursive, serif; } .voucher-signature-field { padding-right: 2em; } .voucher-button { background-color: #a37342; /* warmes Braun */ color: #fff9ec; /* cremefarben */ border: none; border-radius: 12px; font-family: 'Arial Rounded MT Bold', Arial, sans-serif; font-size: 1.1rem; padding: 0.6rem 1.4rem; box-shadow: 0 2px 8px rgba(163, 115, 66, 0.4); transition: background-color 0.3s ease, box-shadow 0.3s ease; cursor: pointer; user-select: none; } .voucher-button:hover, .voucher-button:focus { background-color: #8b5e28; box-shadow: 0 4px 12px rgba(139, 94, 40, 0.6); outline: none; } .voucher-button:active { background-color: #7a5120; box-shadow: none; }