/* The two @import rules that used to sit here - bootstrap-icons from jsDelivr and Outfit from
 * fonts.googleapis.com - are gone on purpose. Both files are now served from this origin and
 * linked directly in App.razor: css/fonts.css and lib/bootstrap-icons/font/bootstrap-icons.css.
 *
 * An @import is invisible to the browser's preload scanner. It cannot start either request
 * until app.css itself has arrived and been parsed, which turned two parallel downloads into a
 * four-deep serial chain across three origins. Do not reintroduce one here: a stylesheet added
 * this way looks harmless in the diff and costs a full round trip in production.
 */

/* ── Design Tokens ── */
:root {
    /* Legacy tokens (used by existing views — migrate view-by-view) */
    --primary: #3498db;
    --secondary: #2c3e50;
    --light: #252a33;
    --dark: #1a1d24;
    --text: #e1e1e1;
    --text-secondary: #b0b7c3;
    --border: #2f3541;

    /* New design system (from Landing v2 — adopt per view) */
    --tl-bg: #1b1d23;
    --tl-bg-raised: #22242b;
    --tl-bg-hover: #282a32;
    --tl-border: #2e3038;
    --tl-border-light: #383a44;
    --tl-text: #edeae5;
    --tl-text-muted: #85858c;
    --tl-text-dim: #5c5c64;
    --tl-accent: #f5a623;
    --tl-accent-soft: rgba(245, 166, 35, 0.10);
    --tl-accent-border: rgba(245, 166, 35, 0.25);
    --tl-purple: #818cf8;
    --tl-purple-soft: rgba(129, 140, 248, 0.10);
    --tl-green: #34d399;
    --tl-green-soft: rgba(52, 211, 153, 0.10);
    --tl-coral: #f87171;
    --tl-coral-soft: rgba(248, 113, 113, 0.10);
    --tl-radius-sm: 12px;
    --tl-radius-md: 20px;
    --tl-radius-lg: 24px;
    --tl-radius-pill: 100px;
    --tl-font: 'Outfit', sans-serif;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--tl-bg);
    color: #eee;
}

a, .btn-link {
    color: #5aa6e6;
}

/* Custom Button Styles */
.btn,
.timelane-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn::after,
.timelane-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.btn:hover,
.timelane-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.btn:hover::after,
.timelane-btn:hover::after {
    transform: translateY(0);
}

.btn:active,
.timelane-btn:active {
    transform: translateY(1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* Primary Button */
.btn-primary,
.timelane-btn-primary {
    background: linear-gradient(135deg, #3498db, #2c5082);
    color: white;
}

.btn-primary:hover,
.timelane-btn-primary:hover {
    background: linear-gradient(135deg, #3ea1e6, #2c5082);
    color: white;
}

/* Secondary Button */
.btn-secondary,
.timelane-btn-secondary {
    background: linear-gradient(135deg, #444, #333);
    color: #eee;
}

.btn-secondary:hover,
.timelane-btn-secondary:hover {
    background: linear-gradient(135deg, #555, #444);
    color: #eee;
}

/* Info Button */
.btn-info,
.timelane-btn-info {
    background: linear-gradient(135deg, #226644, #184f34);
    color: #eee;
}

.btn-info:hover,
.timelane-btn-info:hover {
    background: linear-gradient(135deg, #2a7a51, #226644);
    color: #eee;
}

/* Danger Button */
.btn-danger,
.timelane-btn-danger {
    background: linear-gradient(135deg, #772222, #661919);
    color: #eee;
}

.btn-danger:hover,
.timelane-btn-danger:hover {
    background: linear-gradient(135deg, #8a2828, #772222);
    color: #eee;
}

/* Outline Buttons */
.btn-outline-primary,
.timelane-btn-outline-primary {
    background-color: transparent;
    color: #3498db;
    border: 2px solid #3498db;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
}

.btn-outline-primary:hover,
.timelane-btn-outline-primary:hover {
    background-color: rgba(52, 152, 219, 0.1);
    border-color: #3ea1e6;
    color: #3ea1e6;
}

.btn-outline-secondary,
.timelane-btn-outline-secondary {
    background-color: transparent;
    color: #aaa;
    border: 2px solid #aaa;
    box-shadow: 0 2px 8px rgba(170, 170, 170, 0.1);
}

.btn-outline-secondary:hover,
.timelane-btn-outline-secondary:hover {
    background-color: rgba(170, 170, 170, 0.1);
    border-color: #bbb;
    color: #bbb;
}

/* Button Sizes */
.btn-sm,
.timelane-btn-sm {
    padding: 0.25rem 1rem;
    font-size: 0.875rem;
}

.btn-lg,
.timelane-btn-lg {
    padding: 0.875rem 2.5rem;
    font-size: 1.25rem;
}

/* Block Buttons */
.btn-block,
.timelane-btn-block {
    display: flex;
    width: 100%;
}

/* Outline Button */
.timelane-btn-outline {
    background-color: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
}

.timelane-btn-outline:hover {
    background-color: rgba(52, 152, 219, 0.1);
    border-color: #3ea1e6;
    color: #3ea1e6;
}

.btn:focus, 
.btn:active:focus, 
.btn-link.nav-link:focus, 
.form-control:focus, 
.form-check-input:focus,
.timelane-btn:focus {
  box-shadow: 0 0 0 0.1rem #333, 0 0 0 0.25rem #3498db;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e55858;
}

.validation-message {
    color: #e55858;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45OTMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Es ist ein Fehler aufgetreten."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: #888;
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Dark Mode Styles */
.table {
    color: #ddd !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #2a2a2a !important;
    color: #eee !important;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #232323 !important;
    color: #eee !important;
}

.table-striped > tbody > tr:hover {
    background-color: #333 !important;
}

.table thead {
    background-color: #2c2c2c !important;
}

.modal-content {
    background-color: #333 !important;
    color: #eee !important;
    border-color: #444 !important;
}

.modal-header {
    border-bottom-color: #444 !important;
}

.modal-footer {
    border-top-color: #444 !important;
}

.form-control, .form-select {
    background-color: #444 !important;
    color: #eee !important;
    border-color: #555 !important;
}

.form-control:focus, .form-select:focus {
    background-color: #444 !important;
    color: #eee !important;
    border-color: #2c5082 !important;
    box-shadow: 0 0 0 0.25rem rgba(44, 80, 130, 0.25) !important;
}

.input-group-text {
    background-color: #555 !important;
    color: #eee !important;
    border-color: #666 !important;
}

.alert-info {
    background-color: #1e3a5f !important;
    color: #eee !important;
    border-color: #2c5082 !important;
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.alert {
    background-color: #1e3a5f !important;
    color: #eee !important;
    border-color: #2c5082 !important;
}

/* Adding to the existing dark mode styles */

/* Fix for card text being unreadable */
.card {
    background-color: #2a2a2a !important;
    color: #eee !important;
    border-color: #444 !important;
}

/* Fix time dropdown background */
input[type="time"], 
input[type="date"],
input[type="datetime-local"] {
    background-color: #444 !important;
    color: #eee !important;
    border-color: #555 !important;
}

/* Fix for any remaining form elements */
select, 
option {
    background-color: #444 !important;
    color: #eee !important;
}

/* Ensure modal backdrops are dark */
.modal-backdrop {
    background-color: #000 !important;
}

/* Add styles for pagination if used */
.pagination > li > a,
.pagination > li > span {
    background-color: #333 !important;
    border-color: #555 !important;
    color: #eee !important;
}

.pagination > .active > a, 
.pagination > .active > span {
    background-color: #2c5082 !important;
    border-color: #1e3a5f !important;
}

/* Fix table styling - more specific selectors to override Bootstrap */
table.table,
.table,
table {
    background-color: #222 !important;
    color: #ffffff !important; /* Brighter white text */
    border-color: #444 !important;
}

table.table > thead > tr > th,
.table > thead > tr > th,
table > thead > tr > th {
    background-color: #1e1e1e !important;
    color: #ffffff !important; /* Brighter white text */
    border-color: #444 !important;
    border-bottom: 2px solid #444 !important;
    font-weight: 600 !important; /* Make headers slightly bolder */
}

table.table > tbody > tr > td,
.table > tbody > tr > td,
table > tbody > tr > td {
    border-color: #444 !important;
    background-color: transparent !important;
    color: #ffffff !important; /* Brighter white text */
}

/* Fix for table-striped rows */
.table-striped > tbody > tr:nth-of-type(odd),
table.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #252525 !important;
    color: #ffffff !important; /* Brighter white text */
}

.table-striped > tbody > tr:nth-of-type(even),
table.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #2a2a2a !important;
    color: #ffffff !important; /* Brighter white text */
}

/* Fix time/date inputs with higher specificity */
input[type="time"],
input[type="date"],
input[type="datetime-local"],
.form-control[type="time"],
.form-control[type="date"],
.form-control[type="datetime-local"],
input.form-control[type="time"],
input.form-control[type="date"],
input.form-control[type="datetime-local"] {
    background-color: #333 !important;
    color: #eee !important;
    border-color: #555 !important;
}

/* Fix time/date input dropdowns */
::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Style DateTime picker dropdown */
.calendar-popup,
.time-popup,
.datetime-popup {
    background-color: #333 !important;
    color: #eee !important;
    border-color: #555 !important;
}

/* Fix input placeholders */
::placeholder {
    color: #888 !important;
    opacity: 1 !important;
}

/* Dark mode styling for date/time picker popup elements */

/* Invert calendar icon colors */
::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.8) !important;
    background-color: transparent !important;
}

/* Target Chrome/Edge date input popup styling */
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background-color: transparent !important;
    color-scheme: dark !important;
}

/* Force dark color scheme for datetime pickers */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
    color-scheme: dark !important;
}

/* Ensure dark background for any popup content */
::-webkit-datetime-edit,
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-ampm-field,
::-webkit-datetime-edit-week-field,
::-webkit-inner-spin-button,
::-webkit-calendar-picker-indicator,
::-webkit-clear-button {
    color: #eee !important;
    background-color: transparent !important;
}

/* Custom styles for Firefox date/time pickers */
@-moz-document url-prefix() {
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input[type="week"] {
        background-color: #333 !important;
        color: #eee !important;
    }
}

/* Additional control for date picker styling in all browsers */
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus {
    color: #eee !important;
    background-color: #333 !important;
    border-color: #2c5082 !important;
    box-shadow: 0 0 0 0.25rem rgba(44, 80, 130, 0.25) !important;
}

/* For browsers that support it, force dark UI controls */
@supports (color-scheme: dark) {
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    select {
        color-scheme: dark;
    }
}

/* Dark mode styling for browser autocomplete dropdowns - consolidated rules */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #2c3e50 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
}

/* Chrome, Safari, Edge autofill background */
input.form-control:-webkit-autofill {
    background-color: #2c3e50 !important;
}

/* Firefox specific autofill styling */
@-moz-document url-prefix() {
    input.form-control:-moz-autofill,
    input.form-control:-moz-autofill-preview {
        background-color: #2c3e50 !important;
        color: #ffffff !important;
    }
}

/* Style for the autocomplete options */
input:-webkit-autofill-selected {
    background-color: #34495e !important;
    color: #ffffff !important;
}

/* Fix for selected text color in inputs */
::selection {
    background-color: #2c5082 !important;
    color: #ffffff !important;
}

/* Ensure text color is white when autocompleted and selected */
input::selection,
input::-moz-selection {
    background-color: #2c5082 !important;
    color: #ffffff !important;
}

/* Fix for Chrome/Safari/Edge selected text in autocompleted fields */
input:-webkit-autofill::selection {
    background-color: #2c5082 !important;
    color: #ffffff !important;
}

/* Additional styling for input text color */
input, select, textarea {
    color: #ffffff !important;
}

/* Disable spell check and text suggestions red underlines */
input, textarea {
    spellcheck: false !important;
    -webkit-spell-check: none !important;
    -ms-spellcheck: false !important;
}

/* Force autocomplete dropdown styling - more aggressive approach */
input:-webkit-autofill option,
datalist option,
input option {
    background-color: #2c3e50 !important;
    color: #ffffff !important;
}

/* Additional selector for autofill dropdown items */
option, select option {
    background-color: #2c3e50 !important;
    color: #ffffff !important;
}

/* ── Legal pages (Privacy, Impressum, Disclaimer) ── */
.legal-wrap {
    font-family: var(--tl-font);
    background: var(--tl-bg);
    color: var(--tl-text);
    min-height: 100vh;
    padding: 60px 24px 80px;
}

.legal-container {
    max-width: 720px;
    margin: 0 auto;
}

.legal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--tl-border);
}

.legal-header h1 {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 300;
    letter-spacing: -0.02em;
    margin: 0;
}

.legal-back {
    background: transparent;
    text-decoration: none;
    border: 1px solid var(--tl-border-light);
    color: var(--tl-text-muted);
    padding: 8px 20px;
    border-radius: var(--tl-radius-pill);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--tl-font);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.legal-back:hover {
    color: var(--tl-text);
    border-color: var(--tl-text-muted);
}

.legal-intro {
    font-size: 17px;
    color: var(--tl-text-muted);
    line-height: 1.7;
    margin-bottom: 40px;
}

.legal-body section {
    margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--tl-border);
}

.legal-body section:last-of-type {
    border-bottom: none;
}

.legal-body h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--tl-accent);
    margin-bottom: 16px;
}

.legal-body h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--tl-text);
    margin-top: 20px;
    margin-bottom: 8px;
}

.legal-body p {
    font-size: 15px;
    color: var(--tl-text-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}

.legal-body a {
    color: var(--tl-accent);
    text-decoration: none;
    transition: opacity 0.2s;
}

.legal-body a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Der Vertragstext der Auftragsverarbeitung — dieselbe Darstellung auf der öffentlichen
   Musterfassung und in der Anwendung, weil es derselbe Text ist. */
.tl-dpa {
    font-size: 14px;
    line-height: 1.65;
}

.tl-dpa-parties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin: 8px 0 28px;
}

.tl-dpa-role {
    display: block;
    font-size: 12px;
    color: var(--tl-text-muted);
    margin: 4px 0;
}

.tl-dpa h3 {
    font-size: 16px;
    margin: 26px 0 8px;
}

.tl-dpa p {
    margin: 0 0 10px;
}

.tl-dpa-lead {
    color: var(--tl-text-muted);
}

.tl-dpa-num {
    display: inline-block;
    min-width: 34px;
    color: var(--tl-text-muted);
}

.tl-dpa-table {
    width: 100%;
    margin-top: 10px;
}

.legal-body ul {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.legal-body ul li {
    font-size: 15px;
    color: var(--tl-text-muted);
    line-height: 1.7;
    padding: 6px 0 6px 28px;
    position: relative;
}

.legal-body ul li::before {
    content: "\2192";
    position: absolute;
    left: 0;
    color: var(--tl-accent);
    font-weight: 600;
}

.legal-updated {
    font-size: 13px;
    color: var(--tl-text-dim);
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--tl-border);
}

@media (max-width: 640px) {
    .legal-wrap {
        padding: 40px 16px 60px;
    }

    .legal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* ── Auth pages (Login, Verify) ── */
.auth-wrap {
    font-family: var(--tl-font);
    background: var(--tl-bg);
    color: var(--tl-text);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Top padding clears the fixed top bar. */
    padding: 80px 24px 32px;
    position: relative;
    overflow: hidden;
}

/* Every public page carries a grid module (see Landing.razor.css). The auth pages had none,
   which is why they read as unfinished rather than quiet: a card floating in flat void. Here
   the module is a fine horizontal rule every 24px — ruled paper, because what these screens
   hand you is a document. Faded to an ellipse so the sheet sits in a pool of light instead of
   tiling to the edges like wallpaper. */
.auth-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 23.5H24' fill='none' stroke='%23ffffff' stroke-opacity='.025' stroke-width='.5'/%3E%3C/svg%3E");
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 100%);
}

/* Top bar: gives the brand a home and, more importantly, a way back to the site — the login
   page had exactly one link on it, and that was the disclaimer. Mirrors the landing nav. */
.auth-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 clamp(16px, 4vw, 32px);
    border-bottom: 1px solid var(--tl-border);
    background: rgba(27, 29, 35, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 2;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--tl-text);
    text-decoration: none;
}

.auth-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--tl-accent);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.auth-brand-mark img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.auth-topbar-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--tl-text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.auth-topbar-back:hover,
.auth-topbar-back:focus-visible {
    color: var(--tl-text);
}

/* ── Auth as a document ──────────────────────────────────────────────────────
   Timelane's product is a document, so the sign-in sheet is built like one: an accent rule
   across the top, an issuer block on the left, a meta column on the right, and a dashed line
   where a real invoice would start its line items. The point is not decoration — the facts a
   passwordless login has to state (what the procedure is, how long the code lives, that there
   is no password) become the meta column instead of three grey footnotes nobody reads. */
.auth-doc {
    position: relative;
    z-index: 1;
    width: 560px;
    max-width: 100%;
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-md);
    overflow: hidden;
}

.auth-doc-rule {
    height: 4px;
    background: var(--tl-accent);
}

.auth-doc-head {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    padding: 30px 34px 24px;
    border-bottom: 1px dashed var(--tl-border-light);
}

/* Der Zusatz über der Maske — bei einer Einladung steht hier, worum es geht. Abgesetzt wie ein
   Vermerk auf einem Formular: derselbe Bogen, aber erkennbar nicht das Formular selbst. */
.auth-doc-intro {
    padding: 22px 34px;
    border-bottom: 1px dashed var(--tl-border-light);
    background: var(--tl-bg-raised);
}

.auth-doc-intro p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tl-text-muted);
}

.auth-doc-intro p:last-child {
    margin-bottom: 0;
}

.auth-doc-intro-label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tl-accent);
}

.auth-doc-issuer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-doc-issuer .auth-doc-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.auth-doc-issuer .auth-doc-line {
    font-size: 12.5px;
    color: var(--tl-text-dim);
    line-height: 1.6;
}

.auth-doc-meta {
    display: grid;
    grid-template-columns: auto auto;
    gap: 7px 16px;
    align-self: start;
    margin: 0;
    font-size: 12.5px;
}

.auth-doc-meta dt {
    color: var(--tl-text-dim);
    white-space: nowrap;
}

.auth-doc-meta dd {
    margin: 0;
    text-align: right;
    color: var(--tl-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* For values that can legitimately be long — an email address — wrapping beats overflowing. */
.auth-doc-meta dd.auth-doc-meta-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 22ch;
}

.auth-doc-body {
    padding: 28px 34px 30px;
    text-align: left;
}

.auth-doc-body h1 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    color: var(--tl-text);
}

.auth-doc-body .auth-subtitle {
    margin-bottom: 24px;
    font-size: 14.5px;
}

.auth-doc-foot {
    padding: 0 34px 28px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--tl-text-dim);
}

.auth-doc-foot a {
    color: var(--tl-accent);
    text-decoration: none;
}

.auth-doc-foot a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .auth-doc-head {
        flex-direction: column;
        gap: 18px;
        padding: 26px 22px 20px;
    }

    /* Stacked, the meta column reads better as label-left/value-left than as a right-aligned
       column with nothing to align against. */
    .auth-doc-meta {
        grid-template-columns: auto 1fr;
    }

    .auth-doc-meta dd {
        text-align: left;
    }

    .auth-doc-body {
        padding: 24px 22px 26px;
    }

    .auth-doc-foot {
        padding: 0 22px 24px;
    }
}

/* Answers the question a passwordless login always raises before the user asks it. */
.auth-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    padding: 4px 12px;
    border-radius: var(--tl-radius-pill);
    background: var(--tl-accent-soft);
    border: 1px solid var(--tl-accent-border);
    color: var(--tl-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.auth-card {
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-lg);
    padding: 48px 40px;
    width: 420px;
    max-width: 100%;
    text-align: center;
    position: relative;
    z-index: 1;
}

.auth-logo {
    width: 52px;
    height: 52px;
    margin: 0 auto 24px;
    background: var(--tl-accent-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-logo img {
    width: 26px;
    height: 26px;
    filter: sepia(1) saturate(3) hue-rotate(5deg) brightness(1.1);
}

.auth-card h1 {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: var(--tl-text);
}

.auth-subtitle {
    font-size: 15px;
    color: var(--tl-text-muted);
    margin: 0 0 32px;
    line-height: 1.6;
}

.auth-subtitle strong {
    color: var(--tl-accent);
}

.auth-field {
    text-align: left;
    margin-bottom: 20px;
}

.auth-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--tl-text-muted);
    margin-bottom: 6px;
}

.auth-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--tl-bg);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-sm);
    color: var(--tl-text);
    font-size: 15px;
    font-family: var(--tl-font);
    transition: border-color 0.2s;
    outline: none;
}

.auth-input:focus {
    border-color: var(--tl-accent);
    box-shadow: 0 0 0 3px var(--tl-accent-soft);
}

.auth-input-code {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.5em;
    padding: 14px 16px;
}

.auth-error {
    color: var(--tl-coral);
    font-size: 13px;
    margin-top: 6px;
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-btn-primary {
    width: 100%;
    padding: 14px;
    border-radius: var(--tl-radius-pill);
    background: var(--tl-accent);
    color: var(--tl-bg);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--tl-font);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-btn-primary:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.auth-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-btn-debug {
    width: 100%;
    padding: 10px;
    border-radius: var(--tl-radius-pill);
    background: transparent;
    color: var(--tl-text-dim);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--tl-font);
    border: 1px dashed var(--tl-border-light);
    cursor: pointer;
    transition: all 0.2s;
}

.auth-btn-debug:hover {
    color: var(--tl-text-muted);
    border-color: var(--tl-text-dim);
}

.auth-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(27, 29, 35, 0.3);
    border-top-color: var(--tl-bg);
    border-radius: 50%;
    animation: auth-spin 0.6s linear infinite;
}

/* Kein @@ hier — das ist Razor-Schreibweise und macht die Regel in einer .css-Datei ungültig. */
@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

.auth-message {
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: var(--tl-radius-sm);
    font-size: 14px;
    line-height: 1.5;
}

.auth-message-success {
    background: var(--tl-green-soft);
    color: var(--tl-green);
    border: 1px solid rgba(52, 211, 153, 0.2);
}

.auth-message-error {
    background: var(--tl-coral-soft);
    color: var(--tl-coral);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.auth-timer {
    margin-top: 24px;
    text-align: center;
}

.auth-timer span {
    font-size: 14px;
    color: var(--tl-text-muted);
}

.auth-progress {
    height: 4px;
    background: var(--tl-border);
    border-radius: 2px;
    margin-top: 10px;
    overflow: hidden;
}

.auth-progress-bar {
    height: 100%;
    background: var(--tl-green);
    border-radius: 2px;
    transition: width 1s linear;
}

.auth-back-link {
    color: var(--tl-text-muted);
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.auth-back-link:hover {
    color: var(--tl-text);
}

@media (max-width: 480px) {
    .auth-card {
        padding: 36px 24px;
    }

    .auth-input-code {
        font-size: 22px;
        letter-spacing: 0.3em;
    }
}

/* ── Timelane UI Components (shared across views) ── */

/* Page layout */
.tl-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 0;
}

/* Title on the left, actions on the right.

   Both halves are flex items, and a flex item shrinks by default — so on pages whose title block
   carries a paragraph of explanation, the paragraph won every time and the buttons were crushed
   until their labels wrapped. The actions keep their natural width now and the prose gives way,
   which is the right order: a sentence reflows, a button label does not.

   Wrapping instead of overflowing once even that is not enough, so a narrow window moves the
   actions onto their own line rather than pushing them off the page. */
.tl-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 28px;
}

.tl-page-header > :first-child {
    min-width: 0;
}

/* The document header (TlDocHeader). Same shape as .tl-page-header — it is the same idea, applied
   consistently — but with its own name so a scan test can tell "a document page" from "any page
   with a heading". */
.tl-doc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 28px;
}

.tl-doc-header-title {
    min-width: 0;
}

.tl-doc-header-title h1 {
    margin: 0;
}

/* Facts under the title: counts, sums, a warning. Kept on one line where it fits and allowed to
   wrap where it does not — never truncated, because a number nobody can read is worse than none. */
.tl-doc-subtitle {
    margin-top: 4px;
    color: var(--tl-text-muted);
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.tl-doc-subtitle .tl-warn {
    color: var(--tl-accent);
    font-weight: 600;
}

/* A warning that filters the list when clicked — the number and the way to act on it are the
   same thing, so they are the same control. */
a.tl-warn {
    text-decoration: none;
}

a.tl-warn:hover {
    text-decoration: underline;
}

.tl-doc-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

/* Document pages: the toolbar always on its own line under the title, whether it is two buttons
   or six. Otherwise the layout depends on how long the document number happens to be. */
.tl-doc-header-stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.tl-doc-header-stacked .tl-doc-header-actions {
    justify-content: flex-start;
}

/* The finalised document: lock line, facts, PDF, checksum — in that order on all six kinds. */
.tl-doc-locked {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tl-text-muted);
}

.tl-doc-locked .bi {
    color: var(--tl-accent);
}

.tl-doc-facts {
    margin-bottom: 24px;
}

.tl-fact-value {
    min-height: 21px;
}

.tl-fact-strong {
    font-weight: 600;
}

/* Die Überschrift eines Blocks innerhalb einer Belegseite — „Versandprotokoll", „Rechnungsdaten".
   Sie stand bisher zehnmal als dieselbe Inline-Formatierung in InvoiceDetail; hier ist sie einmal.
   (Die alten Vorkommen sind noch nicht umgestellt.) */
.tl-block-title {
    color: var(--tl-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px;
}

/* Only when there is something to its left. A header with a single child is that child, and
   pinning its width would let a long title overflow instead of wrapping. */
.tl-page-header > :last-child:not(:first-child) {
    flex-shrink: 0;
}

.tl-page-header h1 {
    font-size: 26px;
    font-weight: 300;
    margin: 0;
    letter-spacing: -0.02em;
}

/* Buttons */
.tl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: var(--tl-radius-pill);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--tl-font);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    /* A button label is one line. Without this, a squeezed header wrapped "Neuer API-Schlüssel"
       over three lines and the pill radius turned it into a blob — see .tl-page-header below for
       why it was being squeezed in the first place. */
    white-space: nowrap;
}

/* Ein `tl-btn` ohne Variante hat hier weder Grund noch Schriftfarbe — er verlässt sich darauf,
   dass der Browser einen <button> von sich aus einfärbt. Bei einem <a> tut der Browser das nicht:
   derselbe Klassenname ergab eine helle Pille auf dem Knopf und einen blauen Link daneben. Zu
   sehen war das auf vier Seiten — „Auftrag erstellen" am finalisierten Angebot, „Lieferschein
   erstellen" am Auftrag, „Zu den Freigaben", „Zur Rechnung" — jedes Mal die Aktion, die den Beleg
   weiterführt, also gerade die, die wie ein Knopf aussehen soll.

   ButtonFace/ButtonText statt eigener Werte, damit die beiden nicht nur heute gleich aussehen: es
   sind dieselben Systemfarben, die der Browser dem <button> daneben gibt, und sie folgen dem
   color-scheme mit, wenn es sich ändert. */
a.tl-btn:not(.tl-btn-accent):not(.tl-btn-ghost):not(.tl-btn-danger):not(.tl-btn-mini) {
    background: ButtonFace;
    color: ButtonText;
}

/* Ein abgeschalteter Knopf muss abgeschaltet aussehen. Bis hierher gab es dafür gar keine Regel:
   `disabled` wirkte, der Knopf blieb aber vollfarbig und zeigte weiter den Zeigefinger — man
   klickte und nichts geschah, und das sah nach einem Fehler aus statt nach einer Bedingung, die
   noch nicht erfüllt ist. Gilt für alle Varianten, deshalb hier und nicht je Seite. */
.tl-btn:disabled,
.tl-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

.tl-btn:disabled:hover,
.tl-btn[disabled]:hover {
    filter: none;
    transform: none;
}

.tl-btn-accent {
    background: var(--tl-accent);
    color: var(--tl-bg);
}

.tl-btn-accent:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.tl-btn-ghost {
    background: transparent;
    border: 1px solid var(--tl-border-light);
    color: var(--tl-text-muted);
}

.tl-btn-ghost:hover {
    border-color: var(--tl-text-muted);
    color: var(--tl-text);
}

.tl-btn-danger {
    background: var(--tl-coral);
    color: #fff;
}

.tl-btn-danger:hover {
    filter: brightness(1.1);
}

/* Tables */
.tl-table-wrap {
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-md);
    overflow: hidden;
}

.tl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tl-table thead th {
    background: var(--tl-bg);
    color: var(--tl-text-dim);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 16px;
    border-bottom: 1px solid var(--tl-border);
    text-align: left;
}

.tl-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--tl-border);
    color: var(--tl-text);
    background: transparent !important;
}

/* Ein th im tbody ist die Beschriftungsspalte einer Wertetabelle — „Kunden 35" statt einer
   Kopfzeile. Ohne eigene Regel erbte es nur das zentrierte, randlose Standard-th des Browsers und
   klebte am Kastenrand, während jede Zelle daneben ihre 16 Pixel hatte. */
.tl-table tbody th {
    padding: 10px 16px;
    border-bottom: 1px solid var(--tl-border);
    color: var(--tl-text);
    text-align: left;
    font-weight: 600;
}

.tl-table tbody tr:last-child th {
    border-bottom: none;
}

.tl-table tbody tr:last-child td {
    border-bottom: none;
}

.tl-table tbody tr:hover td {
    background: var(--tl-bg-hover) !important;
}

.tl-td-muted {
    color: var(--tl-text-dim) !important;
}

.tl-td-empty {
    text-align: center;
    color: var(--tl-text-dim) !important;
    padding: 32px 16px !important;
}

.tl-tr-dim td {
    opacity: 0.6;
}

.tl-th-actions {
    width: 100px;
}

/* Badges */
.tl-badge {
    display: inline-block;
    /* A pill is one word by definition. Without this, a narrow column breaks "⛁ Auftrag" after
       the icon and draws a two-line lozenge — which is what the Herkunft column did in every
       document list. Let the column be too narrow instead; the table already scrolls. */
    white-space: nowrap;
    padding: 3px 10px;
    border-radius: var(--tl-radius-pill);
    font-size: 12px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.06);
    color: var(--tl-text-muted);
    border: 1px solid var(--tl-border);
}

.tl-badge-accent {
    background: var(--tl-accent-soft);
    color: var(--tl-accent);
    border-color: var(--tl-accent-border);
}

/* Wer eine Stunde gebucht hat, wenn es nicht der Bereich selbst war. Steht neben der Beschreibung
   in den Buchungslisten und neben der Aufgabe im Rechnungsersteller — dieselbe Marke an beiden
   Stellen, weil es dieselbe Auskunft ist: das hier ist fremde Arbeit. Zurückhaltend gehalten, es
   ist eine Herkunftsangabe und keine Warnung. */
.tl-booked-by {
    margin-left: 8px;
    font-weight: 400;
}

.tl-badge-dim {
    opacity: 0.5;
}

/* Icon buttons */
.tl-actions {
    display: flex;
    gap: 6px;
}

.tl-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--tl-border);
    background: transparent;
    color: var(--tl-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.2s;
}

.tl-icon-btn:hover {
    background: var(--tl-bg-hover);
    color: var(--tl-text);
    border-color: var(--tl-border-light);
}

.tl-icon-btn-danger:hover {
    background: var(--tl-coral-soft);
    color: var(--tl-coral);
    border-color: rgba(248, 113, 113, 0.3);
}

/* Modals */
.tl-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(27, 29, 35, 0.85);
    backdrop-filter: blur(8px);
    z-index: 1050;
}

.tl-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 440px;
    max-width: 92%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-lg);
    z-index: 1060;
    overflow: hidden;
}

/* EditForm inside modal must participate in flex layout */
.tl-modal > form,
.tl-modal > editform,
.tl-modal > [data-permanent] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.tl-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--tl-border);
}

.tl-modal-header h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.tl-modal-close {
    background: none;
    border: none;
    color: var(--tl-text-dim);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    transition: color 0.2s;
}

.tl-modal-close:hover {
    color: var(--tl-text);
}

.tl-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.tl-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--tl-border);
}

.tl-modal-lg {
    width: min(700px, 90vw);
}

/* For the one dialog that is really an editor rather than a form: the blog post, whose Markdown
   field is twenty rows tall. Wider than tl-modal-lg because a code-ish text area at 700px wraps
   every second sentence. */
.tl-modal-xl {
    width: min(900px, 94vw);
}

/* A window onto a document rather than a form: the embedded PDF viewers. They need a height as
   well as a width, because an iframe has no content to size itself by. Two pages had this same
   pair of numbers written out by hand and no way to notice if one of them drifted. */
.tl-modal-viewer {
    width: min(1000px, 90vw);
    height: 90vh;
}

/* Button group */
.tl-btn-group {
    display: flex;
    gap: 4px;
}

/* Form fields */
.tl-field {
    margin-bottom: 16px;
}

.tl-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--tl-text-muted);
    margin-bottom: 6px;
}

.tl-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--tl-bg) !important;
    border: 1px solid var(--tl-border) !important;
    border-radius: var(--tl-radius-sm);
    color: var(--tl-text) !important;
    font-size: 14px;
    font-family: var(--tl-font);
    transition: border-color 0.2s;
    outline: none;
}

.tl-input:focus {
    border-color: var(--tl-accent) !important;
    box-shadow: 0 0 0 3px var(--tl-accent-soft) !important;
}

.tl-input:disabled {
    opacity: 0.5;
}

.tl-field-error {
    color: var(--tl-coral);
    font-size: 13px;
    margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   Sections and form grids.

   These rules used to live in a <style> block inside BusinessSettings.razor
   under biz-* names. Five document forms had copied the class name
   "biz-form-grid" into their markup, where it matched nothing at all — a
   component-scoped <style> block only reaches the page while that component is
   rendered, so every one of those forms was laying its fields out in a single
   unstyled column. They live here now, under tl-*, where a class used on one
   page is a class defined for every page.
   --------------------------------------------------------------------------- */

.tl-sections {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tl-section {
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-md);
    overflow: hidden;
}

.tl-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    transition: background 0.15s;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    font-family: var(--tl-font);
    color: inherit;
}

.tl-section-toggle {
    cursor: pointer;
}

.tl-section-toggle:hover {
    background: var(--tl-bg-hover);
}

.tl-section-header:focus-visible {
    outline: 2px solid var(--tl-accent);
    outline-offset: -2px;
}

.tl-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--tl-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--tl-accent);
    font-size: 16px;
}

.tl-section-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--tl-text);
}

.tl-section-hint {
    font-size: 13px;
    color: var(--tl-text-dim);
}

.tl-chevron {
    margin-left: auto;
    color: var(--tl-text-dim);
    font-size: 14px;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.tl-section-open > .tl-section-header .tl-chevron {
    transform: rotate(180deg);
}

.tl-section-body {
    display: none;
    padding: 0 20px 20px;
    border-top: 1px solid var(--tl-border);
}

.tl-section-open > .tl-section-body {
    display: block;
    padding-top: 20px;
}

/* Two columns on a desk, one on a phone. Fields opt out with tl-field-wide. */
.tl-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.tl-form-grid > .tl-field {
    margin-bottom: 0;
}

.tl-field-wide {
    grid-column: 1 / -1;
}

@media (max-width: 720px) {
    .tl-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Sparkline (TlSparkline). Inline SVG — no chart library, no CDN. */
.spark {
    width: 100%;
    height: 160px;
    display: block;
    overflow: visible;
}

.spark-grid {
    stroke: var(--tl-border);
    stroke-width: 0.5;
    vector-effect: non-scaling-stroke;
}

.spark-line {
    fill: none;
    stroke: var(--tl-accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.spark-fill {
    fill: var(--tl-accent-soft);
    stroke: none;
}

.spark-peak {
    fill: var(--tl-accent);
    vector-effect: non-scaling-stroke;
}

.spark-axis {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--tl-text-dim);
}

.spark-peak-label {
    color: var(--tl-text-muted);
}

.spark-empty {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tl-text-dim);
    font-size: 14px;
}

/* The link in a list row's leading cell.

   Every list navigated by double-clicking the row and nothing else — so the rows could not be
   reached with a keyboard, could not be middle-clicked, could not be opened in a second tab, and
   told a screen reader nothing about where they led. A real anchor on the name fixes all four at
   once; the double-click stays for the hands that already know it.

   It inherits the cell's colour rather than turning blue: a table where every first column is a
   link does not need to shout, and the underline on hover is the affordance. */
.tl-row-link {
    color: inherit;
    text-decoration: none;
    outline-offset: 2px;
}

.tl-row-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--tl-accent);
}

.tl-row-link:focus-visible {
    outline: 2px solid var(--tl-accent);
    border-radius: 4px;
}

/* Add a line by hand, or pick one from the catalogue. Both visible, side by side. */
.tl-items-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* The catalogue picker's rows. A whole row is the target — the entries are short and there is
   nothing else on the row to click. */
.tl-picker-row {
    cursor: pointer;
}

.tl-picker-row:hover {
    background: var(--tl-bg-hover);
}

/* A document number is one token. Browsers break after a hyphen, so "RE-2026-08-0001" came apart
   across two lines — and only in the rows where the table happened to be squeezed, which made one
   list look like two. Same reasoning as the badge and the button: identifiers do not reflow. */
.tl-td-id {
    white-space: nowrap;
}

/* Archived document view (TlArchivedDocument): the PDF of a finalised document, and its hash.
   Global rather than component-scoped for the reason stated at the top of this section — the
   same view is used from six pages, and a scoped block would only reach whichever of them
   happens to render the component. */
.tl-archived {
    margin-top: 24px;
}

.tl-archived-frame {
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-md);
    overflow: hidden;
    height: 85vh;
    min-height: 420px;
}

.tl-archived-frame > iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.tl-archived-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 320px;
    min-height: 0;
    padding: 24px;
    text-align: center;
    color: var(--tl-text-muted);
}

.tl-archived-icon {
    font-size: 32px;
    color: var(--tl-accent);
}

.tl-archived-hash {
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-md);
    padding: 16px;
    margin-top: 16px;
}

.tl-archived-hash > label {
    color: var(--tl-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tl-archived-hash-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}

.tl-archived-hash-row > code {
    color: var(--tl-text);
    font-size: 0.8rem;
    word-break: break-all;
    flex: 1;
}

.tl-archived-hash-row > .tl-btn {
    flex-shrink: 0;
}

/* The pencil next to a page heading that names another record (a customer on the project list, a
   project on the task list). Muted until hovered — the heading is the message, not the button. */
/* The pencil beside a heading. It is a .tl-icon-btn, and that class is display:flex — a block, so
   inside an <h1> it dropped onto its own line under the title and the vertical-align below was
   never able to do anything about it. inline-flex is what makes it sit next to the words. */
.tl-heading-edit {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 8px;
    width: 26px;
    height: 26px;
    opacity: 0.45;
    text-decoration: none;
    font-size: 0.55em;
}

.tl-heading-edit:hover {
    opacity: 1;
}

/* Badge and hint variants that pages elsewhere already use by name. They were each defined in a
   single component's <style> block, so every other page that named them got nothing. */
.tl-badge-danger {
    background: rgba(227, 100, 100, 0.18);
    color: #e68a8a;
}

/* Eine Warnung, die keine Störung ist: „zahlt und arbeitet nicht mehr" ist kein Fehler, aber die
   Zeile, die man zuerst lesen soll. Deshalb bernstein und nicht rot. */
.tl-badge-warn {
    background: rgba(224, 168, 76, 0.16);
    color: #e0a84c;
    border-color: rgba(224, 168, 76, 0.35);
}

/* Kopfzeile eines Kastens: Überschrift links, eine kleine Aktion oder Zahl rechts. */
.tl-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--tl-border);
}

.tl-panel-head h3 {
    margin: 0;
    font-size: 1rem;
}

/* Ein Knopf, der in eine Kopfzeile passt, ohne sie zu dominieren. */
.tl-btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

/* Kennzahlkacheln und Fortschrittsbalken der Verwaltungsseiten. Sie standen im scoped CSS des
   Admin-Dashboards, womit jede andere Seite, die sie beim Namen nannte, ungestylt blieb. */
.tl-stat-card {
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: 10px;
    padding: 1.25rem;
    height: 100%;
}

.tl-stat-card h3 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.15;
}

.tl-stat-card p {
    color: var(--tl-text-muted);
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
}

/* Die Zeile unter der Zahl: woher sie kommt oder wogegen sie sich vergleicht. */
.tl-stat-note {
    color: var(--tl-text-dim);
    font-size: 0.8rem;
    margin: 0.35rem 0 0;
}

/* Eine Kachel, die zum Handeln auffordert — dieselbe Form, nur mit Kante. */
.tl-stat-card.tl-stat-alert {
    border-color: rgba(224, 168, 76, 0.45);
}

.tl-stat-card.tl-stat-alert h3 {
    color: #e0a84c;
}

.tl-progress-bar {
    height: 22px;
    background-color: var(--tl-bg-inset, #1a1a1a);
    border-radius: 6px;
    overflow: hidden;
}

.tl-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #226644, #184f34);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    min-width: 2.5rem;
}

.tl-field-hint {
    font-size: 12px;
    color: var(--tl-text-dim);
    margin-top: 4px;
}

/* Label links, eine kleine Aktion rechts daneben — für Felder, die sich auf Wunsch selbst füllen.
   Das Label behält seinen Abstand nach unten, damit die Zeile im Formularraster nicht auffällt. */
.tl-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.tl-field-head label {
    margin-bottom: 0;
}

/* Bewusst leiser als ein tl-btn: die Aktion gehört zum Feld, nicht zum Beleg. */
.tl-btn-mini {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--tl-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--tl-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity 0.2s;
}

.tl-btn-mini:hover {
    opacity: 0.75;
}

.tl-btn-mini:disabled {
    color: var(--tl-text-dim);
    cursor: default;
    opacity: 1;
}

/* Positions table (DocumentItemsEditor). Numbers right-aligned so they can be compared. */
.tl-num {
    text-align: right;
}

.tl-items-table td {
    vertical-align: middle;
}

.tl-items-table .tl-input {
    padding: 7px 10px;
}

.tl-items-actions {
    white-space: nowrap;
}

.tl-items-note {
    color: var(--tl-text-muted);
    font-size: 13px;
    margin: 0 0 10px;
}

.tl-line-total {
    color: var(--tl-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tl-items-sum td {
    border-top: 1px solid var(--tl-border);
    padding: 12px 14px;
    font-weight: 600;
    color: var(--tl-text);
    font-variant-numeric: tabular-nums;
}

/* The one row of buttons that ends every document form. */
.tl-doc-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--tl-border);
}

.tl-doc-actions .tl-spacer {
    margin-left: auto;
}

.tl-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--tl-text-muted);
    cursor: pointer;
    margin-bottom: 8px;
}

/* The box itself, not only the row around it.
   Left to the browser this renders as a bright blue system checkbox — the one control in the
   application that was never dressed, and it showed: a light-blue square on a dark form, next to
   inputs that are dark with a thin border. */
.tl-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--tl-border);
    border-radius: 4px;
    background: var(--tl-bg);
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: background 0.15s, border-color 0.15s;
}

.tl-checkbox input[type="checkbox"]:hover {
    border-color: var(--tl-accent);
}

.tl-checkbox input[type="checkbox"]::after {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--tl-bg);
    border-bottom: 2px solid var(--tl-bg);
    transform: rotate(-45deg) translate(1px, -1px) scale(0);
    transition: transform 0.12s ease-out;
}

.tl-checkbox input[type="checkbox"]:checked {
    background: var(--tl-accent);
    border-color: var(--tl-accent);
}

.tl-checkbox input[type="checkbox"]:checked::after {
    transform: rotate(-45deg) translate(1px, -1px) scale(1);
}

.tl-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--tl-accent);
    outline-offset: 2px;
}

/* Inside a form field, `.tl-field label { display: block }` outranks `.tl-checkbox` — one class
   plus an element beats one class — so the box and its text stacked instead of sitting side by
   side. That is why this checkbox never looked like the ones elsewhere: not the box, the row. */
.tl-field label.tl-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

/* A checkbox in a two-column form grid has no label above it, so it starts where its neighbour's
   label starts and floats a line too high. This drops it onto the same line as the input beside
   it, which is where the eye expects it. */
.tl-field-check {
    display: flex;
    align-items: flex-end;
    min-height: 62px;
    padding-bottom: 11px;
}

/* Alerts */
.tl-alert {
    padding: 12px 16px;
    border-radius: var(--tl-radius-sm);
    font-size: 14px;
    margin-bottom: 20px;
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
}

.tl-alert-error {
    background: var(--tl-coral-soft);
    color: var(--tl-coral);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

/* Loading */
.tl-loading {
    display: flex;
    justify-content: center;
    padding: 60px;
}

.tl-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--tl-border);
    border-top-color: var(--tl-accent);
    border-radius: 50%;
    animation: auth-spin 0.7s linear infinite;
}

/* Empty state */
.tl-empty-state {
    text-align: center;
    padding: 80px 24px;
    max-width: 400px;
    margin: 0 auto;
}

.tl-empty-state h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
}

.tl-empty-state p {
    color: var(--tl-text-muted);
    margin-bottom: 24px;
    line-height: 1.6;
}

/* Zwei Wege nebeneinander statt eines allein: eine leere Ansicht, die nur eine Tür zeigt, ist
   für jeden eine Sackgasse, der durch die andere wollte. */
.tl-empty-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Utility */
.tl-text-coral {
    color: var(--tl-coral);
}

/* ── Stats cards (Customers, Projects, Tasks) ── */
.cust-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.cust-stat {
    flex: 1;
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
}

/* Das Auge liegt in der Ecke und tritt erst hervor, wenn die Kachel unter dem Zeiger ist:
   ausblenden ist eine seltene Handlung, die Zahl daneben die häufige. Auf Geräten ohne Zeiger
   bleibt es dauerhaft sichtbar — sonst wäre es dort nicht erreichbar. */
.cust-stat-eye {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: 0;
    padding: 2px 4px;
    line-height: 1;
    cursor: pointer;
    color: var(--tl-text-dim);
    opacity: 0;
    transition: opacity 120ms ease;
}

.cust-stat:hover .cust-stat-eye,
.cust-stat-eye:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    .cust-stat-eye {
        opacity: 0.6;
    }
}

.cust-stat-eye:hover {
    color: var(--tl-text);
}

.cust-stats-restore {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: -12px 0 20px;
    font-size: 12px;
    color: var(--tl-text-dim);
}

.cust-stat-label {
    font-size: 12px;
    color: var(--tl-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.cust-stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--tl-text);
}

.cust-stat-amount {
    font-size: 13px;
    color: var(--tl-text-muted);
}

@media (max-width: 767.98px) {
    .cust-stats {
        flex-direction: column;
        gap: 8px;
    }

    .cust-stat {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .cust-stat-value {
        font-size: 16px;
    }

    .cust-stat-amount {
        margin-left: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON (top-row, authenticated shell)
   ═══════════════════════════════════════════════════════════════════════ */
.theme-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--tl-border);
    background: var(--tl-bg-raised);
    color: var(--tl-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.2s;
}

.theme-toggle-btn:hover {
    color: var(--tl-accent);
    border-color: var(--tl-border-light);
    background: var(--tl-bg-hover);
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE  —  ADDITIVE ONLY.
   Everything above is the untouched dark theme (renders identically when
   data-theme is absent or "dark"). This block only takes effect on the
   authenticated shell when <html data-theme="light"> is set (App.razor
   stamps it from the tl-theme cookie; public pages always stay dark).

   Strategy: redefining the --tl-* / legacy tokens flips every token-based
   component (.tl-*, .auth-*, .legal-*, .cust-*) for free. The blocks after
   the tokens only re-skin the hardcoded Bootstrap !important dark rules and
   the few spots that used a background token as on-accent text.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
    color-scheme: light;

    /* New design-system tokens (light) */
    --tl-bg: #fbfaf8;
    --tl-bg-raised: #ffffff;
    --tl-bg-hover: #f4f2ee;
    --tl-border: #ece9e3;
    --tl-border-light: #ddd9d2;
    --tl-text: #1b1d23;
    --tl-text-muted: #62626b;
    --tl-text-dim: #9a9aa2;
    --tl-accent: #f5a623;
    --tl-accent-soft: rgba(245, 166, 35, 0.12);
    --tl-accent-border: rgba(245, 166, 35, 0.38);
    --tl-purple: #5b67dd;
    --tl-purple-soft: rgba(129, 140, 248, 0.13);
    --tl-green: #0f9d63;
    --tl-green-soft: rgba(52, 211, 153, 0.15);
    --tl-coral: #dd514a;
    --tl-coral-soft: rgba(248, 113, 113, 0.13);

    /* Legacy tokens (light) — only the neutral text/border ones; --primary/--secondary
       stay as-is because legacy views pair them with hardcoded companion colors. */
    --text: #1b1d23;
    --text-secondary: #63636b;
    --border: #e5e2dc;
}

/* Das Warnabzeichen im hellen Modus. Das Bernstein des dunklen Modus liegt beim hellen zu nah am
   Akzent und verschwindet auf Weiß; hier trägt es dieselbe Bedeutung in einem dunkleren Ton. */
html[data-theme="light"] .tl-badge-warn {
    background: rgba(224, 168, 76, 0.18);
    color: #8a5a06;
    border-color: rgba(138, 90, 6, 0.3);
}

html[data-theme="light"] .tl-stat-card.tl-stat-alert h3 {
    color: #8a5a06;
}

/* Accent used as TEXT needs a darker amber for contrast on light surfaces
   (the fills keep the bright --tl-accent). */
html[data-theme="light"] .tl-badge-accent,
html[data-theme="light"] .legal-body h2,
html[data-theme="light"] .legal-body a,
html[data-theme="light"] .auth-subtitle strong,
html[data-theme="light"] .auth-footer a {
    color: #a86a05;
}
html[data-theme="light"] .legal-body ul li::before {
    color: #a86a05;
}

/* On-accent text: these used a background token as "dark text on amber" — pin it dark. */
html[data-theme="light"] .tl-btn-accent,
html[data-theme="light"] .auth-btn-primary {
    color: #1b1d23;
}
html[data-theme="light"] .auth-spinner {
    border-top-color: #1b1d23;
    border-color: rgba(27, 29, 35, 0.25);
}

/* Base document + generic links */
html[data-theme="light"] body {
    color: var(--tl-text);
}
html[data-theme="light"] a,
html[data-theme="light"] .btn-link {
    color: #2f6fb0;
}

/* Softer scrim for the app's own modals */
html[data-theme="light"] .tl-modal-backdrop {
    background: rgba(20, 20, 30, 0.32);
}

/* Neutral outline button */
html[data-theme="light"] .btn-outline-secondary,
html[data-theme="light"] .timelane-btn-outline-secondary {
    color: #6a6a6a;
    border-color: #c9c5be;
}
html[data-theme="light"] .btn-outline-secondary:hover,
html[data-theme="light"] .timelane-btn-outline-secondary:hover {
    background-color: rgba(0, 0, 0, 0.04);
    border-color: #8a8a8a;
    color: #4a4a4a;
}

/* ── Re-skin the hardcoded Bootstrap dark !important rules ── */
html[data-theme="light"] .table {
    color: #1b1d23 !important;
}
html[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="light"] table.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #ffffff !important;
    color: #1b1d23 !important;
}
html[data-theme="light"] .table-striped > tbody > tr:nth-of-type(even),
html[data-theme="light"] table.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #f6f4f1 !important;
    color: #1b1d23 !important;
}
html[data-theme="light"] .table-striped > tbody > tr:hover {
    background-color: #f0ede8 !important;
}
html[data-theme="light"] .table thead,
html[data-theme="light"] table.table > thead > tr > th,
html[data-theme="light"] .table > thead > tr > th,
html[data-theme="light"] table > thead > tr > th {
    background-color: #f4f2ee !important;
    color: #1b1d23 !important;
    border-color: #e5e2dc !important;
}
html[data-theme="light"] table.table,
html[data-theme="light"] .table,
html[data-theme="light"] table {
    background-color: #ffffff !important;
    color: #1b1d23 !important;
    border-color: #e5e2dc !important;
}
html[data-theme="light"] table.table > tbody > tr > td,
html[data-theme="light"] .table > tbody > tr > td,
html[data-theme="light"] table > tbody > tr > td {
    border-color: #e5e2dc !important;
    background-color: transparent !important;
    color: #1b1d23 !important;
}

html[data-theme="light"] .modal-content {
    background-color: #ffffff !important;
    color: #1b1d23 !important;
    border-color: #e5e2dc !important;
}
html[data-theme="light"] .modal-header {
    border-bottom-color: #e5e2dc !important;
}
html[data-theme="light"] .modal-footer {
    border-top-color: #e5e2dc !important;
}
html[data-theme="light"] .modal-backdrop {
    background-color: #1b1d23 !important;
}

html[data-theme="light"] .card {
    background-color: #ffffff !important;
    color: #1b1d23 !important;
    border-color: #e5e2dc !important;
}

/* Form controls + inputs */
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] input[type="time"],
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="datetime-local"],
html[data-theme="light"] .form-control[type="time"],
html[data-theme="light"] .form-control[type="date"],
html[data-theme="light"] .form-control[type="datetime-local"],
html[data-theme="light"] input.form-control[type="time"],
html[data-theme="light"] input.form-control[type="date"],
html[data-theme="light"] input.form-control[type="datetime-local"],
html[data-theme="light"] select,
html[data-theme="light"] option {
    background-color: #ffffff !important;
    color: #1b1d23 !important;
    border-color: #d7d3cc !important;
}
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .form-select:focus,
html[data-theme="light"] input[type="date"]:focus,
html[data-theme="light"] input[type="datetime-local"]:focus,
html[data-theme="light"] input[type="month"]:focus,
html[data-theme="light"] input[type="time"]:focus,
html[data-theme="light"] input[type="week"]:focus {
    background-color: #ffffff !important;
    color: #1b1d23 !important;
    border-color: #f5a623 !important;
    box-shadow: 0 0 0 0.2rem rgba(245, 166, 35, 0.20) !important;
}
html[data-theme="light"] .input-group-text {
    background-color: #f4f2ee !important;
    color: #1b1d23 !important;
    border-color: #ddd9d2 !important;
}

/* Global input text color (dark theme forces #fff) */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    color: #1b1d23 !important;
}

/* Native date/time pickers → light UI + dark glyphs */
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="datetime-local"],
html[data-theme="light"] input[type="month"],
html[data-theme="light"] input[type="time"],
html[data-theme="light"] input[type="week"],
html[data-theme="light"] select {
    color-scheme: light !important;
}
html[data-theme="light"] ::-webkit-calendar-picker-indicator {
    filter: none !important;
}
html[data-theme="light"] ::-webkit-datetime-edit,
html[data-theme="light"] ::-webkit-datetime-edit-fields-wrapper,
html[data-theme="light"] ::-webkit-datetime-edit-text,
html[data-theme="light"] ::-webkit-datetime-edit-month-field,
html[data-theme="light"] ::-webkit-datetime-edit-day-field,
html[data-theme="light"] ::-webkit-datetime-edit-year-field,
html[data-theme="light"] ::-webkit-datetime-edit-hour-field,
html[data-theme="light"] ::-webkit-datetime-edit-minute-field,
html[data-theme="light"] ::-webkit-datetime-edit-second-field,
html[data-theme="light"] ::-webkit-datetime-edit-ampm-field,
html[data-theme="light"] ::-webkit-datetime-edit-week-field {
    color: #1b1d23 !important;
}

/* Placeholders */
html[data-theme="light"] ::placeholder {
    color: #9a9aa2 !important;
}

/* Bootstrap close button glyph should be dark on light */
html[data-theme="light"] .btn-close {
    filter: none;
}

/* Alerts */
html[data-theme="light"] .alert,
html[data-theme="light"] .alert-info {
    background-color: #eaf1fb !important;
    color: #1b3a5f !important;
    border-color: #cfe0f2 !important;
}

/* Pagination */
html[data-theme="light"] .pagination > li > a,
html[data-theme="light"] .pagination > li > span {
    background-color: #ffffff !important;
    border-color: #ddd9d2 !important;
    color: #1b1d23 !important;
}
html[data-theme="light"] .pagination > .active > a,
html[data-theme="light"] .pagination > .active > span {
    background-color: #2c5082 !important;
    border-color: #2c5082 !important;
    color: #ffffff !important;
}

/* Autofill */
html[data-theme="light"] input:-webkit-autofill,
html[data-theme="light"] input:-webkit-autofill:hover,
html[data-theme="light"] input:-webkit-autofill:focus,
html[data-theme="light"] input:-webkit-autofill:active,
html[data-theme="light"] input.form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #f4f2ee inset !important;
    -webkit-text-fill-color: #1b1d23 !important;
    caret-color: #1b1d23 !important;
    background-color: #f4f2ee !important;
}
html[data-theme="light"] input:-webkit-autofill option,
html[data-theme="light"] datalist option,
html[data-theme="light"] input option,
html[data-theme="light"] option,
html[data-theme="light"] select option {
    background-color: #ffffff !important;
    color: #1b1d23 !important;
}

/* Shell: faint plus-grid uses a white stroke (invisible on light) → dark stroke */
html[data-theme="light"] main::before {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 0H0v60' fill='none' stroke='%23000000' stroke-opacity='.04' stroke-width='.5'/%3E%3C/svg%3E");
}

/* Error bar: keep native controls light */
html[data-theme="light"] #blazor-error-ui {
    color-scheme: light;
}
/* ── Bildanhänge (Support & Feedback) ── */
.tl-attach {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.tl-attach-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--tl-border);
    border-radius: 8px;
    background: var(--tl-bg);
    color: var(--tl-text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.tl-attach-add:hover {
    border-color: var(--tl-accent-border);
    color: var(--tl-text);
}

.tl-attach-add input[type="file"] {
    display: none;
}

.tl-attach-add:has(input[disabled]) {
    opacity: 0.45;
    cursor: not-allowed;
}

.tl-attach-hint {
    font-size: 12px;
    color: var(--tl-text-dim);
}

.tl-attach-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.tl-attach-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 6px;
    border: 1px solid var(--tl-border);
    border-radius: 8px;
    background: var(--tl-bg);
    max-width: 100%;
}

.tl-attach-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.tl-attach-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tl-attach-name {
    font-size: 13px;
    color: var(--tl-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.tl-attach-size {
    font-size: 11px;
    color: var(--tl-text-dim);
}

.tl-attach-remove {
    border: 0;
    background: transparent;
    color: var(--tl-text-dim);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    line-height: 1;
}

.tl-attach-remove:hover {
    color: var(--tl-coral);
    background: var(--tl-bg-hover);
}

.tl-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.tl-gallery-thumb {
    border: 1px solid var(--tl-border);
    border-radius: 8px;
    background: var(--tl-bg);
    padding: 0;
    cursor: zoom-in;
    overflow: hidden;
    line-height: 0;
    transition: border-color 0.15s;
}

.tl-gallery-thumb:hover {
    border-color: var(--tl-accent-border);
}

.tl-gallery-thumb img {
    width: 96px;
    height: 96px;
    object-fit: cover;
}

.tl-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(27, 29, 35, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px;
    cursor: zoom-out;
}

.tl-lightbox img {
    max-width: 100%;
    max-height: calc(100vh - 120px);
    object-fit: contain;
    border-radius: var(--tl-radius-sm);
}

.tl-lightbox-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #e9e6df;
    font-size: 13px;
}

.tl-lightbox-close {
    color: var(--tl-accent);
}

/* ── Tarifkarten und Aktionscode (Mein Abo, Zugriff) ──
   Aus dem Style-Block von MySubscription hierher: die Karten stehen jetzt in TlPlanCard und
   TlDiscountCodeField, und eine komponentenlokale Regel erreicht keine zweite Seite. */
.sub-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.sub-plan-card {
    background: var(--tl-bg-raised);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-lg);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sub-plan-card:hover {
    border-color: var(--tl-accent-border);
}
.sub-plan-active {
    border-color: var(--tl-accent) !important;
    box-shadow: 0 0 0 1px var(--tl-accent-border);
}
.sub-plan-active .sub-plan-header {
    background: var(--tl-accent-soft);
}

/* Der Tarif, auf den der eingegebene Code greift. Dasselbe Grün wie die Meldung neben dem
   Feld — die beiden gehören zusammen, und wer „Gilt für Professional" liest, soll die Karte
   finden, ohne die Namen zu vergleichen.

   Zwei Pixel statt eines, damit es auch neben drei anderen Karten sofort auffällt. Die Breite
   bleibt: das Raster steht auf 1fr, die Spur gibt die Außenkante vor, und die dickere Linie
   wächst nach innen statt die Reihe zu verschieben.

   Auch beim Überfahren, und mit !important gegen die Kante des aktiven Tarifs: steht man auf
   Professional und der Code gilt für Professional, ist „hier greift der Rabatt" die neue und
   damit die wichtigere Auskunft. */
.sub-plan-discounted,
.sub-plan-discounted:hover {
    border-color: var(--tl-green) !important;
    border-width: 2px;
}
.sub-plan-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--tl-border);
}
.sub-plan-header h3 {
    font-family: var(--tl-font);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tl-text);
    margin: 0 0 6px;
}
.sub-plan-price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--tl-text);
}
.sub-plan-period {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--tl-text-muted);
}
.sub-plan-vat {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--tl-text-muted);
}
.sub-plan-desc {
    padding: 12px 20px 0;
    font-size: 0.85rem;
    color: var(--tl-text-muted);
    margin: 0;
}
.sub-plan-features {
    list-style: none;
    padding: 14px 20px;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sub-plan-features li {
    font-size: 0.88rem;
    color: var(--tl-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sub-feat-yes span {
    color: var(--tl-green);
    font-weight: 700;
}
.sub-feat-no span {
    color: var(--tl-text-dim);
}
.sub-feat-no {
    color: var(--tl-text-dim);
}
.sub-plan-action {
    padding: 0 20px 18px;
}

/* .tl-btn hält Beschriftungen einzeilig — richtig für eine Kopfzeile, falsch in einer Karte fester
   Breite: „Für bernhard@pollerspoeck.net bezahlen" lief seitlich heraus. Hier darf umbrochen
   werden, und ein Wort ohne Leerzeichen bricht innerhalb. */
.sub-plan-action .tl-btn {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
    text-align: center;
}

/* ── Aktionscode ── */
.sub-code {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.sub-code-input {
    max-width: 220px;
    text-transform: uppercase;
}

.sub-code-note {
    font-size: 0.9rem;
    color: var(--tl-text-muted);
}

.sub-code-ok {
    color: var(--tl-green);
}

/* Der alte Preis bleibt sichtbar. „9,59 €" allein sagt nichts — die Aussage ist der
   Unterschied. */
.sub-plan-was {
    text-decoration: line-through;
    color: var(--tl-text-dim);
    font-size: 0.9rem;
    margin-right: 8px;
}

@media (max-width: 640px) {
    .sub-plans-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   KURZ ERKLÄRT  —  Griff am rechten Rand und Aufklapper (TlVideoHelp.razor)

   Hier und nicht im Komponenten-<style>, weil der Aufklapper über der Seite
   liegt und der Griff auf jeder Seite hängt: eine Regel, die nur solange
   existiert, wie ihre Komponente gerendert wird, ist für ein Overlay die
   falsche Bauform.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Der Griff ── */
.tl-vh-handle {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    /* Über dem Inhalt, aber unter dem ausgeklappten Menü (1040) und jedem Dialog:
       der Griff ist das Unwichtigste auf dem Schirm. */
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 15px 9px;
    cursor: pointer;
    background: var(--tl-bg-raised);
    color: var(--tl-text-muted);
    border: 1px solid var(--tl-border);
    border-right: 0;
    border-radius: 12px 0 0 12px;
    font-family: var(--tl-font);
    transition: color 0.15s, background 0.15s;
}

.tl-vh-handle:hover {
    color: var(--tl-text);
    background: var(--tl-bg-hover);
}

.tl-vh-handle > i {
    font-size: 17px;
}

.tl-vh-handle-cap {
    writing-mode: vertical-rl;
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tl-vh-handle-count {
    writing-mode: horizontal-tb;
    font-size: 11px;
    font-weight: 600;
    color: var(--tl-text-dim);
    border-top: 1px solid var(--tl-border);
    padding-top: 8px;
    width: 100%;
    text-align: center;
}

/* Der ganze Hinweis auf Ungesehenes: ein Punkt. Keine Zahl, keine Bewegung. */
.tl-vh-handle-dot {
    position: absolute;
    top: 9px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tl-accent);
}

/* ── Der Aufklapper ── */
.tl-vh-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1400;
}

.tl-vh-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* Am Telefon ist der Bildschirm schmaler als die 400 px des Entwurfs. */
    width: min(400px, 100vw);
    z-index: 1500;
    background: var(--tl-bg-raised);
    border-left: 1px solid var(--tl-border);
    display: flex;
    flex-direction: column;
    font-family: var(--tl-font);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.4);
}

.tl-vh-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--tl-border);
    flex-shrink: 0;
}

.tl-vh-head-icon {
    color: var(--tl-accent);
}

.tl-vh-head-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tl-text-muted);
}

.tl-vh-close {
    margin-left: auto;
    background: none;
    border: 0;
    color: var(--tl-text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
}

.tl-vh-close:hover {
    background: var(--tl-bg-hover);
    color: var(--tl-text);
}

.tl-vh-body {
    padding: 18px;
    overflow-y: auto;
}

.tl-vh-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--tl-text);
    margin: 0 0 6px;
}

.tl-vh-sub {
    font-size: 12px;
    color: var(--tl-text-dim);
    margin: 0 0 14px;
}

.tl-vh-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    color: var(--tl-text-muted);
    font-family: var(--tl-font);
    font-size: 12.5px;
    cursor: pointer;
    padding: 0 0 14px;
}

.tl-vh-back:hover {
    color: var(--tl-text);
}

/* ── Liste ── */
.tl-vh-card {
    display: flex;
    gap: 13px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 11px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: none;
    font-family: var(--tl-font);
    color: var(--tl-text);
    margin-bottom: 3px;
}

.tl-vh-card:hover {
    background: var(--tl-bg-hover);
    border-color: var(--tl-border);
}

.tl-vh-thumb {
    position: relative;
    width: 46px;
    height: 82px;
    flex-shrink: 0;
    border-radius: 8px;
    background: linear-gradient(160deg, #2b2f3a, #1d1f26);
    border: 1px solid var(--tl-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tl-text-dim);
    font-size: 16px;
}

.tl-vh-card-new .tl-vh-thumb {
    color: var(--tl-accent);
}

.tl-vh-meta {
    display: block;
    min-width: 0;
    padding-top: 2px;
}

.tl-vh-card-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 5px;
}

/* In der Liste am Griff bleibt derselbe Text einzeilig: hier ist er eine Beschriftung neben einem
   Vorschaubild, kein Absatz. Absätze machten die Karten unterschiedlich hoch und die Liste unruhig. */
.tl-vh-card-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    color: var(--tl-text-dim);
    line-height: 1.5;
}

.tl-vh-card-state {
    font-size: 11.5px;
    color: var(--tl-text-dim);
    margin-top: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tl-vh-card-state .bi-circle-fill {
    font-size: 6px;
}

.tl-vh-card-new .tl-vh-card-state {
    color: var(--tl-accent);
}

/* ── Vorschaubild und Video ──
   Ein Verlauf statt eines Bildes von Google: das Vorschaubild von YouTube zu laden wäre schon
   der Aufruf, den erst der Klick auslösen darf. */
.tl-vh-poster {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    max-width: 100%;
    margin: 0 auto 16px;
    aspect-ratio: 9 / 16;
    border-radius: var(--tl-radius-sm);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    border: 1px solid var(--tl-border-light);
    background: linear-gradient(160deg, #2b2f3a 0%, #23262e 55%, #1d1f26 100%);
}

.tl-vh-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 42%, rgba(245, 166, 35, 0.16), transparent 62%);
}

.tl-vh-play {
    position: relative;
    z-index: 1;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--tl-accent);
    color: #1b1d23;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 8px 28px rgba(245, 166, 35, 0.35);
}

.tl-vh-poster-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 10px 12px;
    font-size: 11px;
    color: var(--tl-text-muted);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
    text-align: left;
}

.tl-vh-frame {
    width: 240px;
    max-width: 100%;
    margin: 0 auto 16px;
    aspect-ratio: 9 / 16;
    border-radius: var(--tl-radius-sm);
    overflow: hidden;
    background: #000;
}

.tl-vh-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Der Inhalt kommt aus SimpleMarkup und ist echtes HTML: Absätze, Umbrüche und Listen stehen
   als Elemente da, nicht als Leerzeichen — deshalb kein white-space-Kniff. */
.tl-vh-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--tl-text-muted);
    margin: 0 0 18px;
}

.tl-vh-text p {
    margin: 0 0 10px;
}

.tl-vh-text p:last-child,
.tl-vh-text ul:last-child,
.tl-vh-text ol:last-child {
    margin-bottom: 0;
}

.tl-vh-text ul,
.tl-vh-text ol {
    margin: 0 0 10px;
    padding-left: 20px;
}

.tl-vh-text li {
    margin: 0 0 4px;
}

.tl-vh-consent {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--tl-text-dim);
    border-top: 1px solid var(--tl-border);
    padding-top: 12px;
    margin-bottom: 20px;
}

.tl-vh-consent a {
    color: var(--tl-text-muted);
}

/* ── Danach ── */
.tl-vh-more-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tl-text-dim);
    margin: 0 0 10px;
}

.tl-vh-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: none;
    color: var(--tl-text);
    font-family: var(--tl-font);
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.tl-vh-item:hover {
    background: var(--tl-bg-hover);
    border-color: var(--tl-border);
}

.tl-vh-item i {
    color: var(--tl-text-dim);
    font-size: 15px;
}

.tl-vh-item-new i {
    color: var(--tl-accent);
}

/* ── Fuß ── */
.tl-vh-foot {
    margin-top: auto;
    padding: 14px 18px;
    border-top: 1px solid var(--tl-border);
    flex-shrink: 0;
}

.tl-vh-foot-label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: var(--tl-text-muted);
    cursor: pointer;
    margin: 0;
}

/* Die beiden Verläufe sind die einzigen festen Farben hier: sie stellen eine Videofläche dar,
   und die bleibt auch im hellen Erscheinungsbild eine Fläche — nur eine hellere. */
html[data-theme="light"] .tl-vh-thumb {
    background: linear-gradient(160deg, #e8e5df, #d6d2ca);
}

html[data-theme="light"] .tl-vh-poster {
    background: linear-gradient(160deg, #e8e5df 0%, #ddd9d2 55%, #cfcac1 100%);
}

html[data-theme="light"] .tl-vh-poster-foot {
    color: #ffffff;
}