/* Secure Files – ruhiges, systemnahes Design (hell/dunkel automatisch)
   Basis: Bootstrap 5.3. Eigene Tokens, Komponenten wie in der Dateien-App. */

:root {
    color-scheme: light dark;

    /* Flächen */
    --bg: #f2f2f7;
    --surface: #ffffff;
    --surface-2: #f2f2f7;
    --surface-3: #e5e5ea;
    --material: rgba(249, 249, 251, 0.78);

    /* Text */
    --label: #1c1c1e;
    --label-2: rgba(60, 60, 67, 0.66);
    --label-3: rgba(60, 60, 67, 0.42);
    --sep: rgba(60, 60, 67, 0.16);
    --sep-solid: #d1d1d6;

    /* Akzente */
    --accent: #007aff;
    --accent-ink: #0062cc;
    --green: #248a3d;
    --red: #d70015;
    --orange: #b25000;
    --teal: #0a7f93;
    --purple: #8944ab;

    --accent-fill: #007aff;
    --green-fill: #34c759;
    --red-fill: #ff3b30;
    --orange-fill: #ff9500;
    --teal-fill: #30b0c7;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.22);

    --radius: 20px;
    --radius-sm: 12px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, system-ui, sans-serif;

    /* Alte Variablennamen, die Unterseiten noch verwenden */
    --border-dark: var(--sep-solid);
    --bg-card: var(--surface-2);
    --text-light: var(--label);
    --primary-blue: var(--accent-fill);
    --success-green: var(--green-fill);
    --danger-red: var(--red-fill);
    --warning-yellow: var(--orange-fill);

    /* Bootstrap-Variablen auf die eigenen Tokens legen */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--label);
    --bs-body-font-family: var(--font);
    --bs-emphasis-color: var(--label);
    --bs-secondary-color: var(--label-2);
    --bs-border-color: var(--sep);
    --bs-link-color: var(--accent);
    --bs-primary: var(--accent-fill);
    --bs-primary-rgb: 0, 122, 255;
    --bs-box-shadow: var(--shadow);
    --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000000;
        --surface: #1c1c1e;
        --surface-2: #2c2c2e;
        --surface-3: #3a3a3c;
        --material: rgba(28, 28, 30, 0.72);

        --label: #f5f5f7;
        --label-2: rgba(235, 235, 245, 0.62);
        --label-3: rgba(235, 235, 245, 0.38);
        --sep: rgba(84, 84, 88, 0.55);
        --sep-solid: #3a3a3c;

        --accent: #0a84ff;
        --accent-ink: #64b5ff;
        --green: #30d158;
        --red: #ff6961;
        --orange: #ffb340;
        --teal: #5ac8e0;
        --purple: #bf5af2;

        --accent-fill: #0a84ff;
        --green-fill: #30d158;
        --red-fill: #ff453a;
        --orange-fill: #ff9f0a;
        --teal-fill: #40c8e0;

        --shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 10px 30px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.7);
        --bs-primary-rgb: 10, 132, 255;
    }
}

* { -webkit-tap-highlight-color: transparent; }

body {
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5;
    background: var(--bg);
    color: var(--label);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
}

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* ===== Navigation: durchscheinende Leiste ===== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    background: var(--material);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border-bottom: 1px solid var(--sep);
    box-shadow: none;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--label) !important;
}

.navbar-brand::before {
    content: "";
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 9px;
    background-color: var(--accent-fill);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5.5c0 4.2 2.9 7.6 7 9.5 4.1-1.9 7-5.3 7-9.5V6z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/svg%3E");
    background-size: 62%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}

.navbar-nav { gap: 0.15rem; }

.nav-link {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--label-2) !important;
    border-radius: 999px;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.nav-link:hover { color: var(--label) !important; background: var(--surface-3); }
.nav-link:active { background: var(--sep-solid); }

.nav-link.active {
    color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 0;
}

.navbar-toggler { border: 0; padding: 0.4rem 0.5rem; box-shadow: none !important; border-radius: 10px; }
.navbar-toggler:hover { background: var(--surface-3); }

.navbar-toggler-icon {
    background-image: none !important;
    background-color: var(--label);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 991.98px) {
    .navbar-collapse { padding: 0.6rem 0 0.4rem; }
    .navbar-nav { gap: 0.1rem; }
    .nav-link { padding: 0.7rem 0.9rem !important; border-radius: 12px; }
}

/* ===== Seite ===== */
.container { flex: 1; max-width: 1080px; }
.container.my-5 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--label);
    font-weight: 700;
    font-optical-sizing: auto;
}

h1 { font-size: clamp(1.9rem, 4.5vw, 2.75rem); line-height: 1.08; letter-spacing: -0.028em; margin-bottom: 1rem; }
h2 { font-size: clamp(1.5rem, 3.2vw, 1.9rem); line-height: 1.15; letter-spacing: -0.022em; margin-bottom: 0.9rem; }
h3 { font-size: 1.35rem; letter-spacing: -0.018em; margin-bottom: 0.75rem; }
h4 { font-size: 1.15rem; letter-spacing: -0.015em; font-weight: 600; }
h5, h6 { font-size: 1.0625rem; letter-spacing: -0.012em; font-weight: 600; }

p { color: var(--label-2); }
.text-muted, .text-secondary, .card-text, .card-subtitle, .form-text { color: var(--label-2) !important; }
.text-primary { color: var(--accent) !important; }
.small, small { font-size: 0.8125rem; }

a { color: var(--accent); text-decoration: none; transition: opacity 0.15s ease; }
a:hover { color: var(--accent); opacity: 0.8; text-decoration: none; }
p a:hover, .alert a:hover, .small a:hover { text-decoration: underline; opacity: 1; }

hr { border-color: var(--sep); opacity: 1; }

/* ===== Karten (flache, gruppierte Flächen) ===== */
.card {
    position: relative;
    background: var(--surface);
    color: var(--label);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.card.shadow, .card.shadow-sm { box-shadow: var(--shadow) !important; }
.card.border-0 { border: 0 !important; }
.card-body { padding: 1.4rem; }
.card-body.p-5 { padding: 2.5rem !important; }
@media (max-width: 575.98px) { .card-body.p-5 { padding: 1.75rem !important; } }

.card-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; color: var(--label); }

.card-header, .card-header.bg-light {
    padding: 1rem 1.4rem;
    background: transparent !important;
    color: var(--label) !important;
    border: 0;
    border-bottom: 1px solid var(--sep);
    font-weight: 600;
}

.card-header.bg-primary { background: color-mix(in srgb, var(--accent) 10%, var(--surface)) !important; }
.card-header .text-white, .card-header.text-white, .card-header h4, .card-header h5 { color: var(--label) !important; }
.card-header a { color: var(--accent); }

.card.bg-light { background: var(--surface-2) !important; color: var(--label) !important; box-shadow: none; }

/* Verlinkte Karten reagieren – statische nicht */
a > .card:hover { transform: translateY(-3px); }
a > .card:active { transform: scale(0.98); transition-duration: 0.1s; }
a > .card:hover .card-title { color: var(--accent); }

/* Symbol-Kachel (Startseite) */
.tile {
    display: inline-grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
    border-radius: 15px;
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
.tile svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile-blue { background: var(--accent-fill); }
.tile-green { background: var(--green-fill); }
.tile-orange { background: var(--orange-fill); }
.tile-teal { background: var(--teal-fill); }
.tile-purple { background: #af52de; }
.tile-lg { width: 4rem; height: 4rem; border-radius: 18px; margin-bottom: 1.25rem; }
.tile-lg svg { width: 2.1rem; height: 2.1rem; }

/* ===== Buttons ===== */
.btn {
    --bs-btn-border-width: 0;
    padding: 0.55rem 1.1rem;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.005em;
    border: 0;
    border-radius: 12px;
    transition: transform 0.3s var(--ease), background-color 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

.btn:active { transform: scale(0.97); transition-duration: 0.1s; }
.btn:focus-visible { box-shadow: none; }
.btn:disabled, .btn.disabled { opacity: 0.45; }
.btn-sm { padding: 0.35rem 0.8rem; font-size: 0.8125rem; border-radius: 10px; }
.btn-lg { padding: 0.85rem 1.5rem; font-size: 1.0625rem; border-radius: 14px; }

.btn-primary { background: var(--accent-fill); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--accent-fill); color: #fff; filter: brightness(1.08); }
.btn-success { background: var(--green-fill); color: #fff; }
.btn-success:hover, .btn-success:focus { background: var(--green-fill); color: #fff; filter: brightness(1.06); }
.btn-danger { background: var(--red-fill); color: #fff; }
.btn-danger:hover, .btn-danger:focus { background: var(--red-fill); color: #fff; filter: brightness(1.06); }
.btn-warning { background: var(--orange-fill); color: #fff; }
.btn-warning:hover { background: var(--orange-fill); color: #fff; filter: brightness(1.06); }
.btn-secondary { background: var(--surface-3); color: var(--label); }
.btn-secondary:hover, .btn-secondary:focus { background: var(--sep-solid); color: var(--label); }

/* Outline-Varianten werden zu „getönten“ Schaltflächen */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-info,
.btn-outline-warning, .btn-outline-danger, .btn-outline-success, .btn-outline-dark, .btn-outline-light {
    border: 0;
    background: var(--tint, var(--surface-2));
    color: var(--tint-ink, var(--label));
}
.btn-outline-primary { --tint: color-mix(in srgb, var(--accent) 14%, transparent); --tint-ink: var(--accent); }
.btn-outline-info    { --tint: color-mix(in srgb, var(--teal-fill) 16%, transparent); --tint-ink: var(--teal); }
.btn-outline-warning { --tint: color-mix(in srgb, var(--orange-fill) 18%, transparent); --tint-ink: var(--orange); }
.btn-outline-danger  { --tint: color-mix(in srgb, var(--red-fill) 14%, transparent); --tint-ink: var(--red); }
.btn-outline-success { --tint: color-mix(in srgb, var(--green-fill) 16%, transparent); --tint-ink: var(--green); }
.btn-outline-secondary { --tint: var(--surface-2); --tint-ink: var(--label); }

.btn-outline-primary:hover, .btn-outline-info:hover, .btn-outline-warning:hover,
.btn-outline-danger:hover, .btn-outline-success:hover, .btn-outline-secondary:hover {
    background: color-mix(in srgb, var(--tint-ink) 22%, var(--surface));
    color: var(--tint-ink);
}
.btn-outline-secondary:hover { background: var(--surface-3); }

.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: 10px 0 0 10px; }
.btn-group > .btn:last-child { border-radius: 0 10px 10px 0; }
.btn-group > .btn + .btn { margin-left: 1px; }

.btn-close { opacity: 0.5; }
.btn-close:hover { opacity: 0.9; }
@media (prefers-color-scheme: dark) { .btn-close { filter: invert(1) grayscale(1); } }

/* ===== Formulare ===== */
.form-control, .form-select, .input-group-text {
    padding: 0.65rem 0.9rem;
    font-size: 1rem;
    color: var(--label);
    background-color: var(--surface-2);
    border: 1px solid transparent;
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-control::placeholder { color: var(--label-3); }
.form-control:focus, .form-select:focus {
    color: var(--label);
    background-color: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.form-control:disabled, .form-control[readonly] { background-color: var(--surface-2); color: var(--label-2); opacity: 1; }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238e8e93' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); }
.input-group > .form-control, .input-group > .form-select { border-radius: 12px 0 0 12px; }
.input-group > .btn:last-child { border-radius: 0 12px 12px 0; }
.input-group-sm > .form-control, .input-group-sm > .btn { border-radius: 10px; font-size: 0.875rem; }
.input-group-sm > .form-control { border-radius: 10px 0 0 10px; }
.input-group-sm > .btn:last-child { border-radius: 0 10px 10px 0; }

.form-label { margin-bottom: 0.4rem; font-size: 0.875rem; font-weight: 600; color: var(--label); }
.form-text { font-size: 0.8125rem; }

.form-check-input { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; background-color: var(--surface-3); border: 0; }
.form-check-input:checked { background-color: var(--accent-fill); border-color: var(--accent-fill); }
.form-check-input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.form-check-label { color: var(--label); }

/* ===== Hinweise ===== */
.alert {
    padding: 0.95rem 1.15rem;
    color: var(--label);
    background: var(--tint);
    border: 0;
    border-radius: 14px;
}
.alert strong { color: var(--tint-ink); }
.alert-info    { --tint: color-mix(in srgb, var(--accent) 12%, var(--surface)); --tint-ink: var(--accent-ink); }
.alert-success { --tint: color-mix(in srgb, var(--green-fill) 14%, var(--surface)); --tint-ink: var(--green); }
.alert-warning { --tint: color-mix(in srgb, var(--orange-fill) 16%, var(--surface)); --tint-ink: var(--orange); }
.alert-danger  { --tint: color-mix(in srgb, var(--red-fill) 13%, var(--surface)); --tint-ink: var(--red); }
.alert a { text-decoration: underline; }

/* ===== Abzeichen (Gruppen, Status) ===== */
.badge {
    padding: 0.32rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    border-radius: 999px;
    color: var(--tint-ink, var(--label));
    background: var(--tint, var(--surface-3));
}
.badge-primary   { --tint: color-mix(in srgb, var(--accent) 15%, transparent); --tint-ink: var(--accent); }
.badge-success   { --tint: color-mix(in srgb, var(--green-fill) 17%, transparent); --tint-ink: var(--green); }
.badge-warning   { --tint: color-mix(in srgb, var(--orange-fill) 19%, transparent); --tint-ink: var(--orange); }
.badge-danger    { --tint: color-mix(in srgb, var(--red-fill) 15%, transparent); --tint-ink: var(--red); }
.badge-info      { --tint: color-mix(in srgb, var(--teal-fill) 18%, transparent); --tint-ink: var(--teal); }
.badge-secondary { --tint: var(--surface-3); --tint-ink: var(--label-2); }
.badge.bg-primary { background: var(--accent-fill) !important; color: #fff; }

.status-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.status-expired { background: color-mix(in srgb, var(--red-fill) 15%, transparent); color: var(--red); }
.status-active { background: color-mix(in srgb, var(--green-fill) 17%, transparent); color: var(--green); }
.status-shared { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }

/* ===== Tabellen: gruppierte Listen ===== */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--label);
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--label);
    --bs-table-hover-bg: color-mix(in srgb, var(--label) 4%, transparent);
    --bs-table-hover-color: var(--label);
    --bs-table-border-color: var(--sep);
    margin-bottom: 0;
    background: transparent;
    color: var(--label);
}

.table thead th {
    padding: 0.8rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--label-2);
    background: transparent;
    border-bottom: 1px solid var(--sep);
}

.table tbody td { padding: 0.9rem; vertical-align: middle; color: var(--label); background: transparent; border-bottom: 1px solid var(--sep); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--label) 4%, transparent); }
.table-sm td, .table-sm th { padding: 0.6rem 0.7rem; }
.table-responsive { border-radius: var(--radius-sm); }

.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--sep); --bs-list-group-color: var(--label); border-radius: var(--radius-sm); }
.list-group-item { background: transparent; color: var(--label); border-color: var(--sep); }

/* ===== Dialoge als Sheet ===== */
.modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: 0.4; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.modal-content {
    color: var(--label);
    background: var(--surface);
    border: 0;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
}

.modal.fade .modal-dialog { transform: scale(0.94) translateY(8px); transition: transform 0.45s var(--ease), opacity 0.3s ease; opacity: 0; }
.modal.show .modal-dialog { transform: none; opacity: 1; }

.modal-header { padding: 1.2rem 1.5rem 0.4rem; background: transparent; color: var(--label); border: 0; }
.modal-title { font-weight: 700; letter-spacing: -0.015em; }
.modal-body { padding: 0.75rem 1.5rem 1rem; color: var(--label); }
.modal-footer { padding: 0.5rem 1.5rem 1.4rem; border: 0; gap: 0.5rem; }

.dropdown-menu {
    --bs-dropdown-bg: var(--material);
    --bs-dropdown-color: var(--label);
    --bs-dropdown-link-color: var(--label);
    --bs-dropdown-link-hover-bg: var(--surface-3);
    --bs-dropdown-link-hover-color: var(--label);
    --bs-dropdown-border-width: 0;
    padding: 0.4rem;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
}
.dropdown-item { border-radius: 9px; }

/* ===== Fortschritt ===== */
.progress { height: 0.4rem; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.progress-bar { background: var(--accent-fill); border-radius: 999px; transition: width 0.3s var(--ease); }

/* ===== Upload & Dateien ===== */
.upload-zone {
    padding: 3rem 1.5rem;
    text-align: center;
    cursor: pointer;
    background: var(--surface-2);
    border: 2px dashed var(--sep-solid);
    border-radius: var(--radius);
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.4s var(--ease);
}

.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}
.upload-zone.dragover { transform: scale(1.01); }
.upload-zone h4 { color: var(--label); margin-bottom: 0.4rem; }
.upload-zone p { margin-bottom: 0; }

.file-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: var(--surface-2);
    border: 0;
    border-radius: 14px;
    transition: background 0.2s ease;
}
.file-item:hover { background: var(--surface-3); }
.file-icon { font-size: 1.75rem; min-width: 2.75rem; text-align: center; }
.file-info { flex: 1; min-width: 0; }
.file-name { margin-bottom: 0.15rem; font-weight: 600; color: var(--label); overflow-wrap: anywhere; }
.file-meta { font-size: 0.8125rem; color: var(--label-2); }
.file-actions { display: flex; gap: 0.5rem; }

/* Upload-Seite: Zeilen/Fortschritt auf neue Farben */
.file-row { background: var(--surface-2) !important; border: 0 !important; border-radius: 14px !important; box-shadow: 0 0 0 1px transparent inset; }
.file-row.state-uploading { box-shadow: 0 0 0 1.5px var(--accent) inset; }
.file-row.state-done { background: color-mix(in srgb, var(--green-fill) 12%, var(--surface)) !important; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--green-fill) 60%, transparent) inset; }
.file-row.state-failed { background: color-mix(in srgb, var(--red-fill) 11%, var(--surface)) !important; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--red-fill) 60%, transparent) inset; }
.file-row-meta { color: var(--label-2) !important; }
.file-row-error { color: var(--red) !important; }
.file-row-bar-wrap { background: var(--surface-3) !important; }
.file-row-bar { background: var(--accent-fill) !important; }
.file-row.state-done .file-row-bar { background: var(--green-fill) !important; }
.file-row.state-failed .file-row-bar { background: var(--red-fill) !important; }
.overall-progress .progress-bar { background: var(--accent-fill) !important; }
.gallery-tile { border-radius: 14px !important; }
.gallery-tile.selected { outline-color: var(--accent-fill) !important; }
.gallery-select { accent-color: var(--accent-fill) !important; }

.border-primary { border-color: var(--accent) !important; }
.border-danger { border-color: var(--red-fill) !important; }
.border-warning { border-color: var(--orange-fill) !important; }
.bg-light-gray { background: var(--surface-2); }
code { color: var(--accent-ink); background: var(--surface-2); padding: 0.1rem 0.35rem; border-radius: 6px; font-size: 0.875em; }

/* ===== Footer ===== */
footer {
    margin-top: auto;
    padding: 1.75rem 0 2rem;
    background: transparent;
    border: 0;
    text-align: center;
}

.footer-links { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; font-size: 0.8125rem; }
.footer-links a { color: var(--label-2); transition: color 0.15s ease; }
.footer-links a:hover { color: var(--label); text-decoration: underline; opacity: 1; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .container.my-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
    .card-body { padding: 1.15rem; }
    .upload-zone { padding: 2.25rem 1rem; }
    .file-item { flex-direction: column; align-items: flex-start; }
    .file-actions { width: 100%; justify-content: flex-end; }
    table { font-size: 0.875rem; }
    .table thead th, .table tbody td { padding: 0.7rem 0.6rem; }
}

/* ===== Barrierefreiheit ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    a > .card:hover, .btn:active, a > .card:active { transform: none; }
    .modal.fade .modal-dialog { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
    .navbar, .dropdown-menu { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .modal-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
    :root { --label-2: var(--label); --sep: var(--label-3); }
    .card { box-shadow: 0 0 0 1px var(--label-3); }
    .form-control, .form-select { border-color: var(--label-3); }
}

/* ===== Druck ===== */
@media print {
    body { background: #fff; color: #000; }
    .navbar, footer, .btn, .form-control { display: none !important; }
    .card { box-shadow: none; border: 1px solid #ccc; }
}
/* ===== Icons (Linien-Symbole als Masken, übernehmen die Textfarbe) ===== */
[class^="ic-"] {
    display: inline-block; flex: none; width: 1.15em; height: 1.15em; margin-right: 0.4em;
    vertical-align: -0.2em; background-color: currentColor;
    -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
[class^="ic-"][data-solo], .btn [class^="ic-"], .btn-group [class^="ic-"] { margin-right: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
h1 [class^="ic-"] { width: 0.8em; height: 0.8em; margin-right: 0.35em; vertical-align: -0.05em; color: var(--accent); }
h2 [class^="ic-"], h4 [class^="ic-"], h5 [class^="ic-"] { color: var(--label-2); }
.alert [class^="ic-"] { color: var(--tint-ink); }
.play-badge [class^="ic-"] { width: 1em; height: 1em; margin: 0; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)); }
.upload-icon { display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 18px; color: #fff; background: var(--accent-fill); }
.upload-icon [class^="ic-"] { width: 2rem; height: 2rem; margin: 0; }
.file-row-icon [class^="ic-"] { width: 1.15rem; height: 1.15rem; margin: 0; vertical-align: middle; }
.file-row.state-done .file-row-icon { color: var(--green); }
.file-row.state-failed .file-row-icon { color: var(--red); }
.file-row.state-uploading .file-row-icon { color: var(--accent); }

.ic-check { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.ic-x-circle { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9.5 9.5 5 5m0-5-5 5'/%3E%3C/svg%3E"); }
.ic-x { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.ic-warning { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.8 19.5h18.4z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.1'/%3E%3C/svg%3E"); }
.ic-clock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ic-ban { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m5.7 5.7 12.6 12.6'/%3E%3C/svg%3E"); }
.ic-arrow-left { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5m6-6-6 6 6 6'/%3E%3C/svg%3E"); }
.ic-wrench { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.8 2.8-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); }
.ic-eye { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ic-search { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E"); }
.ic-file { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E"); }
.ic-file-text { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.ic-download { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0-4-4m4 4 4-4M5 19h14'/%3E%3C/svg%3E"); }
.ic-trash { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E"); }
.ic-layers { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E"); }
.ic-sliders { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E"); }
.ic-refresh { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14-4L4 9M4 4v5h5M4 13a8 8 0 0 0 14 4l2-2M20 20v-5h-5'/%3E%3C/svg%3E"); }
.ic-box { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
.ic-plus { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ic-users { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 19c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5M16 5.2a3.2 3.2 0 0 1 0 5.8M18.5 14.2c1.6.8 2.5 2.4 2.5 4.8'/%3E%3C/svg%3E"); }
.ic-key { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 9-9M16 7l3 3'/%3E%3C/svg%3E"); }
.ic-link { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.ic-folder { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.ic-check-square { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.ic-image { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='9.5' r='1.6'/%3E%3Cpath d='m4 17 5-5 4 4 3-3 4 4'/%3E%3C/svg%3E"); }
.ic-film { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M8 5v14M16 5v14M3 10h5M16 10h5M3 14h5M16 14h5'/%3E%3C/svg%3E"); }
.ic-lock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.ic-unlock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E"); }
.ic-pencil { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4L16.5 4.5a2 2 0 0 1 3 3L8 19z'/%3E%3Cpath d='m14 7 3 3'/%3E%3C/svg%3E"); }
.ic-upload { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4m0 0-4 4m4-4 4 4M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E"); }
.ic-shield { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5.5c0 4.2 2.9 7.6 7 9.5 4.1-1.9 7-5.3 7-9.5V6z'/%3E%3C/svg%3E"); }
.ic-globe { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
.ic-play { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='black'/%3E%3C/svg%3E"); }