/* ==========================================================================
   image board - Dark Theme
   Uebernommen aus der Alt-Anwendung (DotnetWebGallery, Layout()) und um die
   Bausteine der Blazor-Fassung ergaenzt.
   ========================================================================== */

:root {
    color-scheme: dark;
    --bg: #0e1114;
    --bg-soft: #12171b;
    --panel: #181d22;
    --panel-strong: #20262d;
    --ink: #f4f7f8;
    --muted: #a5b0b8;
    --line: #303942;
    --line-strong: #43515d;
    --accent: #2dd4bf;
    --accent-hover: #5eead4;
    --accent-ink: #04201d;
    --blue: #7dd3fc;
    --gold: #f8c76b;
    --danger: #f87171;
    --danger-ink: #2a0606;
    --thumb: #252d34;
    --shadow: 0 18px 55px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
    min-height: 100%;
    margin: 0;
    background: linear-gradient(180deg, #101417 0%, #0e1114 42%, #15191d 100%);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

a { color: inherit; }

.wrap {
    width: min(1240px, 100%);
    margin: 0 auto;
    padding: 34px 22px 48px;
}

.top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.top > div:first-child {
    min-width: 0;
}

.top-actions,
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

h1,
h2 {
    margin: 0;
    font-weight: 760;
}

h1 {
    font-size: clamp(1.45rem, 2vw, 2.05rem);
}

h2 {
    font-size: 1.08rem;
}

.title-wrap,
.photo-panel h2,
.caption {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.muted {
    color: var(--muted);
    font-size: .94rem;
}

.panel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.stat {
    display: inline-grid;
    gap: 1px;
    min-width: 96px;
    padding: 10px 12px;
    background: #11161a;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.stat strong {
    font-size: 1.12rem;
}

.stat span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.login {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login form,
.panel,
.album-card,
.tile,
.upload,
.empty,
.maintenance,
.share {
    background: color-mix(in srgb, var(--panel) 92%, #ffffff 8%);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.login form {
    width: min(420px, 100%);
    padding: 26px;
}

.panel,
.upload,
.empty,
.maintenance,
.share {
    padding: 18px;
}

.panel {
    margin-bottom: 16px;
}

label {
    display: block;
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
}

label + label,
form label {
    margin-top: 10px;
}

input[type="password"],
input[type="text"],
input[type="url"],
input[type="file"],
textarea,
select {
    width: 100%;
    min-height: 46px;
    color: var(--ink);
}

input[type="password"],
input[type="text"],
input[type="url"],
textarea,
select {
    margin-top: 7px;
    padding: 11px 13px;
    background: #101417;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
    outline: 0;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

textarea {
    min-height: 86px;
    resize: vertical;
}

select {
    appearance: none;
}

input[type="file"] {
    padding: 10px;
    background: #101417;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    font: inherit;
}

input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, .16);
}

textarea:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, .16);
    outline: 0;
}

input[readonly] {
    color: var(--blue);
    cursor: copy;
}

button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .14s ease, background .14s ease, border-color .14s ease;
}

button:hover,
.button:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

button:disabled {
    cursor: wait;
    opacity: .72;
    transform: none;
}

.button {
    background: #151a1f;
    color: var(--ink);
    border: 1px solid var(--line-strong);
}

.button:hover {
    background: #1d252b;
    border-color: var(--accent);
}

.danger {
    background: var(--danger);
    color: var(--danger-ink);
}

.login button,
.login .button {
    width: 100%;
    margin-top: 14px;
}

.error,
.flash {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 750;
}

.error {
    color: #fecaca;
    background: rgba(248, 113, 113, .12);
    border: 1px solid rgba(248, 113, 113, .32);
}

.flash {
    color: var(--accent-hover);
    background: rgba(45, 212, 191, .1);
    border: 1px solid rgba(45, 212, 191, .28);
}

.form-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(180px, 1.2fr) minmax(180px, 1.2fr) auto;
    gap: 14px;
    align-items: end;
}

.form-grid.wide {
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(220px, 1.4fr) minmax(180px, 1fr) auto;
}

.toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 180px auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
}

.albums {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 16px;
}

.album-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-left: 3px solid var(--accent);
}

.album-preview {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--thumb);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.album-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.album-preview.empty-preview {
    display: grid;
    place-items: center;
    color: var(--muted);
    font-weight: 800;
}

.album-card form {
    display: grid;
    gap: 10px;
    padding-top: 2px;
}

.share {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
    border-left: 3px solid var(--blue);
}

.maintenance {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    margin-bottom: 18px;
    border-left: 3px solid var(--blue);
}

.maintenance form {
    margin: 0;
}

.upload {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
    border-left: 3px solid var(--gold);
}

.upload label {
    margin: 0;
}

.drop-upload {
    grid-template-columns: minmax(0, 1fr) minmax(170px, auto);
    align-items: stretch;
}

.drop-upload button {
    align-self: stretch;
}

.dropzone {
    position: relative;
    display: grid;
    gap: 6px;
    min-height: 118px;
    padding: 18px;
    place-content: center start;
    background: linear-gradient(135deg, rgba(45, 212, 191, .12), rgba(125, 211, 252, .06));
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.dropzone:hover,
.dropzone.dragover {
    background: linear-gradient(135deg, rgba(45, 212, 191, .2), rgba(125, 211, 252, .1));
    border-color: var(--accent);
    transform: translateY(-1px);
}

.dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dropzone-title {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 820;
}

.dropzone-note {
    color: var(--muted);
    font-size: .9rem;
}

.file-list {
    color: var(--blue);
    font-size: .86rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.tile {
    overflow: hidden;
    box-shadow: none;
}

.preview {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--thumb);
}

.preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .18s ease;
}

.broken-preview {
    display: grid;
    place-items: center;
    padding: 18px;
    color: #fecaca;
    font-weight: 820;
    text-align: center;
    background: rgba(248, 113, 113, .12);
}

.tile:hover .preview img {
    transform: scale(1.025);
}

.meta {
    display: grid;
    gap: 10px;
    padding: 12px;
    font-size: .9rem;
}

.name {
    overflow: hidden;
    color: var(--ink);
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
}

.download {
    color: var(--accent);
    font-weight: 800;
    text-decoration: none;
}

.caption {
    color: var(--muted);
    min-height: 1.35em;
}

.image-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.image-actions form {
    margin: 0;
}

.image-actions button,
.image-actions .button {
    width: 100%;
    min-height: 38px;
    font-size: .86rem;
}

.replace-form {
    margin: 0;
}

.replace-label {
    display: grid;
    min-height: 38px;
    place-items: center;
    padding: 0 12px;
    color: var(--ink);
    background: #151a1f;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    cursor: pointer;
    font-size: .86rem;
    font-weight: 800;
}

.replace-label input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.caption-form {
    display: grid;
    gap: 8px;
}

.photo-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 18px;
    align-items: start;
    width: 100%;
}

.photo-stage {
    overflow: hidden;
    display: grid;
    min-height: min(68vh, 720px);
    place-items: center;
    background: #050708;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.photo-stage img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(72vh, 780px);
    display: block;
    object-fit: contain;
}

.photo-panel {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.photo-panel .stat {
    width: 100%;
    min-width: 0;
}

.photo-panel .actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    align-items: stretch;
}

.photo-panel .actions .button,
.photo-panel button {
    width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
}

.photo-panel form {
    min-width: 0;
}

.rpg-panel {
    display: grid;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}

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

.profile-field {
    display: grid;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.profile-field strong {
    color: var(--gold);
    font-size: .78rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.rpg-sheet {
    min-height: 190px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: .86rem;
    line-height: 1.45;
}

.copy-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: end;
}

.delete-form button {
    width: 100%;
}

.empty {
    color: var(--muted);
    min-height: 130px;
    display: grid;
    place-items: center;
    text-align: center;
}

.app-version {
    width: min(1240px, 100%);
    margin: 0 auto;
    padding: 0 22px 24px;
    color: var(--muted);
    font-size: .78rem;
    text-align: right;
}

.footer-brand {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.footer-brand a {
    color: var(--accent-hover);
    font-weight: 800;
    text-decoration: none;
}

/* Galerie 14: dichter, moderner, besser bedienbar */
:root {
    --bg: #090d10;
    --bg-soft: #10161a;
    --panel: #151b20;
    --panel-strong: #1d252b;
    --ink: #f7fbfb;
    --muted: #aab5ba;
    --line: #2c373f;
    --line-strong: #4a5862;
    --accent: #25c7b7;
    --accent-hover: #61e3d6;
    --blue: #9cc7ff;
    --gold: #f1bb62;
    --danger: #d82f2f;
    --danger-ink: #fff6f6;
    --thumb: #202931;
    --shadow: 0 18px 45px rgba(0, 0, 0, .32);
}

body {
    background:
        linear-gradient(120deg, rgba(37, 199, 183, .05), transparent 34%),
        linear-gradient(180deg, #090d10 0%, #10161a 52%, #12181c 100%);
}

.top {
    align-items: center;
    margin-bottom: 28px;
}

.top-actions,
.actions {
    gap: 8px;
}

h1 {
    line-height: 1.05;
    letter-spacing: 0;
}

.login form,
.panel,
.album-card,
.tile,
.upload,
.empty,
.maintenance,
.share,
.bulk-bar,
.order-form,
.list-panel {
    background: color-mix(in srgb, var(--panel) 90%, #ffffff 10%);
    border: 1px solid color-mix(in srgb, var(--line) 84%, #ffffff 16%);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.panel,
.upload,
.empty,
.maintenance,
.share,
.bulk-bar,
.order-form,
.list-panel {
    padding: 18px;
}

.compact-panel {
    border-left: 3px solid var(--accent);
}

input[type="number"],
input[type="password"],
input[type="text"],
input[type="url"],
textarea,
select {
    width: 100%;
    min-height: 46px;
    color: var(--ink);
    background: #0c1114;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
}

input[type="number"] {
    margin-top: 7px;
    padding: 11px 13px;
}

button,
.button {
    gap: 7px;
    border: 1px solid transparent;
    box-shadow: 0 8px 22px rgba(37, 199, 183, .12);
}

.button {
    box-shadow: none;
}

.danger:hover {
    background: #ef4444;
}

.toolbar {
    grid-template-columns: minmax(260px, 1fr) minmax(190px, 230px) auto;
}

.bulk-bar,
.order-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    margin: 0 0 14px;
}

.bulk-bar select,
.bulk-bar button,
.order-form button {
    min-width: 180px;
}

.check-row,
.select-all,
.select-check {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    color: var(--ink);
    font-weight: 800;
}

.check-row input,
.select-all input,
.select-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-items: start;
}

.tile {
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--panel-strong) 82%, #ffffff 8%);
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.tile:hover {
    border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
    transform: translateY(-2px);
}

.tile[draggable="true"] {
    cursor: grab;
}

.tile.dragging {
    opacity: .55;
    transform: scale(.985);
}

.select-check {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    padding: 7px 9px;
    background: rgba(9, 13, 16, .78);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    font-size: .78rem;
}

.preview {
    background:
        linear-gradient(135deg, rgba(156, 199, 255, .08), transparent),
        var(--thumb);
}

.preview img {
    background: #0a0d0f;
}

.broken-preview {
    color: #ffd0d0;
    background: linear-gradient(135deg, rgba(216, 47, 47, .22), rgba(241, 187, 98, .06));
}

.meta {
    background: color-mix(in srgb, var(--panel-strong) 88%, #ffffff 4%);
}

.name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 2px 8px;
    color: #d8fdf8;
    background: rgba(37, 199, 183, .15);
    border: 1px solid rgba(37, 199, 183, .24);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}

.photo-shell {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
}

.photo-stage {
    background:
        linear-gradient(135deg, rgba(156, 199, 255, .06), transparent),
        #050708;
}

.photo-panel,
.audit-row {
    background: color-mix(in srgb, var(--panel) 90%, #ffffff 8%);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.list-panel {
    display: grid;
    gap: 10px;
}

.audit-row {
    display: grid;
    gap: 4px;
    padding: 14px;
}

.audit-row > div:first-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
}

.audit-row span {
    color: var(--muted);
    overflow-wrap: anywhere;
}

@supports not (background: color-mix(in srgb, #000 50%, #fff 50%)) {
    .login form,
    .panel,
    .album-card,
    .tile,
    .upload,
    .empty,
    .maintenance,
    .share,
    .bulk-bar,
    .order-form,
    .list-panel {
        background: var(--panel);
    }
}

@media (max-width: 1100px) {
    .photo-shell {
        grid-template-columns: 1fr;
    }

    .photo-stage {
        min-height: auto;
    }

    .photo-stage img {
        max-height: 72vh;
    }
}

@media (max-width: 860px) {
    .wrap {
        padding: 18px 14px 34px;
    }

    .top,
    .upload,
    .form-grid,
    .form-grid.wide,
    .toolbar,
    .photo-shell,
    .bulk-bar,
    .order-form {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .top {
        display: grid;
    }

    .top-actions,
    .actions,
    .panel-head {
        display: grid;
    }

    .button,
    button {
        width: 100%;
    }

    .albums {
        grid-template-columns: 1fr;
    }

    .grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* ==========================================================================
   Ergänzungen für die Blazor-Fassung
   (Grundgerüst, Formulare, Tabellen, Wizard, Charakterbogen, PDF-Leser,
    Regel-Browser). Alles baut auf den Variablen des Alt-Themes auf.
   ========================================================================== */

/* ---------- Grundlagen ---------- */

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

::selection {
    background: rgba(37, 199, 183, .32);
}

* {
    scrollbar-color: var(--line-strong) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
    background-clip: content-box;
}

h3,
h4,
h5 {
    margin: 0;
    font-weight: 780;
    line-height: 1.25;
}

h3 {
    font-size: 1.02rem;
}

h4 {
    font-size: .94rem;
}

h5 {
    color: var(--muted);
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

p {
    margin: 0 0 10px;
}

p:last-child {
    margin-bottom: 0;
}

hr {
    height: 0;
    margin: 16px 0;
    border: 0;
    border-top: 1px solid var(--line);
}

code,
kbd {
    padding: 1px 6px;
    background: #0c1114;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: .86em;
}

.skip-link {
    position: absolute;
    z-index: 100;
    top: -80px;
    left: 12px;
    padding: 10px 16px;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 8px;
    font-weight: 800;
    text-decoration: none;
    transition: top .16s ease;
}

.skip-link:focus {
    top: 12px;
}

.wrap.narrow {
    width: min(900px, 100%);
}

.wrap.wide {
    width: min(1520px, 100%);
}

/* ---------- kleine Helfer ---------- */

.stack {
    display: grid;
    gap: 14px;
}

.stack.tight {
    gap: 8px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.row.end {
    justify-content: flex-end;
}

.row.between {
    justify-content: space-between;
}

.grow {
    flex: 1 1 220px;
    min-width: 0;
}

.cols-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.cols-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.small {
    font-size: .84rem;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.nowrap {
    white-space: nowrap;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}

a.link,
.link {
    color: var(--accent-hover);
    font-weight: 750;
    text-decoration: none;
}

a.link:hover,
.link:hover {
    text-decoration: underline;
}

.button.small,
button.small {
    min-height: 34px;
    padding: 0 11px;
    font-size: .84rem;
}

.button.ghost,
button.ghost {
    background: transparent;
    border: 1px solid var(--line-strong);
    box-shadow: none;
    color: var(--ink);
}

.button.ghost:hover,
button.ghost:hover {
    background: rgba(255, 255, 255, .05);
    border-color: var(--accent);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    padding: 1px 9px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}

.badge.accent {
    color: #d8fdf8;
    background: rgba(37, 199, 183, .16);
    border-color: rgba(37, 199, 183, .3);
}

.badge.gold {
    color: #ffeac4;
    background: rgba(241, 187, 98, .16);
    border-color: rgba(241, 187, 98, .32);
}

.badge.blue {
    color: #dceaff;
    background: rgba(156, 199, 255, .14);
    border-color: rgba(156, 199, 255, .3);
}

.badge.danger {
    color: #ffd7d7;
    background: rgba(216, 47, 47, .18);
    border-color: rgba(216, 47, 47, .38);
}

/* ---------- Seitenkopf (PageHeader) ---------- */

.top .title-wrap {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.top .crumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-decoration: none;
    text-transform: uppercase;
}

.top .crumb:hover {
    color: var(--accent-hover);
}

/* ---------- Formulare ---------- */

.field {
    display: grid;
    gap: 0;
    min-width: 0;
}

.field-note,
.hint {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 600;
}

.field-note {
    margin-top: 6px;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
}

.validation-message,
.field-error {
    display: block;
    margin-top: 6px;
    color: #ffb4b4;
    font-size: .84rem;
    font-weight: 750;
}

.invalid,
input.invalid,
textarea.invalid,
select.invalid {
    border-color: var(--danger);
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    accent-color: var(--accent);
}

input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="search"],
input[type="time"] {
    width: 100%;
    min-height: 46px;
    margin-top: 7px;
    padding: 11px 13px;
    background: #0c1114;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    color: var(--ink);
    font: inherit;
    outline: 0;
}

input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

select {
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

fieldset {
    padding: 14px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
}

legend {
    padding: 0 8px;
    color: var(--gold);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.inline-form {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
}

/* ---------- Tabellen ---------- */

.table-scroll {
    overflow-x: auto;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
}

table.data {
    width: 100%;
    background: color-mix(in srgb, var(--panel) 90%, #ffffff 6%);
    border-collapse: collapse;
    font-size: .9rem;
}

table.data caption {
    padding: 10px 12px;
    color: var(--muted);
    font-weight: 800;
    text-align: left;
}

table.data th,
table.data td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

table.data th {
    background: rgba(255, 255, 255, .04);
    color: var(--gold);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

table.data tbody tr:last-child td {
    border-bottom: 0;
}

table.data tbody tr:hover td {
    background: rgba(37, 199, 183, .06);
}

table.data td.num,
table.data th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Attributwahl in den Tabellen des Charakterbogens: kompakt genug für eine Zelle. */
select.attr-choice {
    width: auto;
    min-width: 7.5rem;
    min-height: 32px;
    margin-top: 0;
    padding: 4px 8px;
    font-size: .85rem;
}

/* ---------- Meldungen (Flash) ---------- */

/* Der Behälter bleibt auch leer im Markup, damit app.js Cookie-Meldungen
   nachtragen kann. Die Abstände bringt .flash selbst mit - ein leerer
   Behälter braucht so keinen Platz. */
.flash-host {
    display: block;
}

.flash {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    overflow-wrap: anywhere;
}

.flash .flash-body {
    flex: 1;
    min-width: 0;
}

.flash .flash-title {
    display: block;
    font-weight: 850;
}

.flash .flash-icon {
    font-size: 1.05rem;
    line-height: 1.3;
}

.flash-close {
    min-height: 26px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    box-shadow: none;
    color: inherit;
    font-size: .9rem;
    font-weight: 900;
    opacity: .75;
}

.flash-close:hover {
    background: rgba(255, 255, 255, .1);
    color: inherit;
    transform: none;
}

/* Beide Schreibweisen werden unterstützt: .flash.error und .flash.flash-error
   (letztere liefert FlashMessage.CssClass aus image_board.Services). */

.flash.success,
.flash-success {
    color: var(--accent-hover);
    background: rgba(37, 199, 183, .1);
    border: 1px solid rgba(37, 199, 183, .3);
}

.flash.info,
.flash-info {
    color: #dceaff;
    background: rgba(156, 199, 255, .1);
    border: 1px solid rgba(156, 199, 255, .28);
}

.flash.warning,
.flash-warning {
    color: #ffe3b4;
    background: rgba(241, 187, 98, .12);
    border: 1px solid rgba(241, 187, 98, .32);
}

.flash.error,
.flash-error {
    color: #ffcfcf;
    background: rgba(216, 47, 47, .14);
    border: 1px solid rgba(216, 47, 47, .38);
}

/* ---------- Leerzustand ---------- */

.empty {
    gap: 8px;
    padding: 26px 18px;
    place-items: center;
}

.empty .empty-icon {
    font-size: 1.9rem;
    line-height: 1;
    opacity: .8;
}

.empty .empty-title {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 820;
}

.empty .empty-text {
    max-width: 52ch;
}

.empty .empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 6px;
}

/* ---------- Schlagworte ---------- */

.tag {
    text-decoration: none;
}

a.tag:hover,
button.tag:hover {
    background: rgba(37, 199, 183, .26);
    border-color: var(--accent);
    color: #eafffb;
    transform: none;
}

button.tag {
    box-shadow: none;
    cursor: pointer;
}

.tags .tag-more {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
}

/* ---------- Ablegen & Hochladen ---------- */

.dropzone.has-files {
    border-style: solid;
    border-color: var(--accent);
}

.dropzone-hint {
    color: var(--muted);
    font-size: .78rem;
}

.upload-extra {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 12px;
    align-items: end;
}

.upload-extra > * {
    min-width: 0;
}

.upload-progress {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.upload-progress.active {
    display: grid;
}

.upload-progress .bar-track {
    overflow: hidden;
    height: 10px;
    background: #0c1114;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
}

.upload-progress .bar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--blue));
    transition: width .12s linear;
}

.upload-progress .pct {
    min-width: 5ch;
    color: var(--accent-hover);
    font-size: .84rem;
    font-weight: 850;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- Sortieren per Ziehen ---------- */

.grid.reorder-active .tile {
    outline: 1px dashed rgba(37, 199, 183, .35);
    outline-offset: -4px;
}

.tile.drop-target {
    border-color: var(--accent);
}

.drag-handle {
    cursor: grab;
    user-select: none;
}

/* ---------- Registerkarten ---------- */

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.tabs a,
.tabs button {
    min-height: 36px;
    padding: 0 13px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
}

.tabs a:hover,
.tabs button:hover {
    background: rgba(255, 255, 255, .05);
    color: var(--ink);
    transform: none;
}

.tabs a.active,
.tabs button.active {
    background: rgba(37, 199, 183, .14);
    border-color: rgba(37, 199, 183, .34);
    color: var(--accent-hover);
}

/* ---------- Wizard ---------- */

.wizard {
    display: grid;
    gap: 16px;
}

.wizard-steps {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    padding: 12px;
    background: color-mix(in srgb, var(--panel) 90%, #ffffff 10%);
    border: 1px solid var(--line);
    border-radius: 8px;
    scrollbar-width: thin;
}

.step-dot {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: none;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.step-dot:hover {
    background: rgba(255, 255, 255, .05);
    border-color: var(--line-strong);
    color: var(--ink);
    transform: none;
}

.step-dot .step-num {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    background: rgba(255, 255, 255, .07);
    border-radius: 999px;
    color: inherit;
    font-size: .78rem;
    font-weight: 900;
}

.step-dot.done {
    border-color: rgba(37, 199, 183, .34);
    color: var(--accent-hover);
}

.step-dot.done .step-num {
    background: rgba(37, 199, 183, .2);
}

.step-dot.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.step-dot.active .step-num {
    background: rgba(4, 32, 29, .22);
    color: var(--accent-ink);
}

.step-dot.has-error {
    border-color: rgba(216, 47, 47, .5);
    color: #ffcfcf;
}

.wizard-panel {
    display: grid;
    gap: 16px;
    padding: 18px;
    background: color-mix(in srgb, var(--panel) 90%, #ffffff 10%);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.wizard-panel > header {
    display: grid;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.wizard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
}

.wizard-actions .spacer {
    flex: 1;
}

.wizard-hint {
    padding: 12px 14px;
    background: rgba(156, 199, 255, .08);
    border: 1px solid rgba(156, 199, 255, .22);
    border-radius: 8px;
    color: #dceaff;
    font-size: .88rem;
}

/* ---------- Attribute & Punktekonten ---------- */

.point-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: rgba(37, 199, 183, .09);
    border: 1px solid rgba(37, 199, 183, .28);
    border-radius: 8px;
    font-weight: 800;
}

.point-pool strong {
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.point-pool.bad {
    background: rgba(216, 47, 47, .12);
    border-color: rgba(216, 47, 47, .38);
    color: #ffcfcf;
}

.point-pool.warn {
    background: rgba(241, 187, 98, .12);
    border-color: rgba(241, 187, 98, .34);
    color: #ffe3b4;
}

.point-pool .pool-bar {
    overflow: hidden;
    flex: 1 1 160px;
    height: 8px;
    background: #0c1114;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
}

.point-pool .pool-bar span {
    display: block;
    height: 100%;
    background: var(--accent);
}

.attr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 12px;
}

.attr-box {
    display: grid;
    gap: 8px;
    padding: 12px;
    background: color-mix(in srgb, var(--panel-strong) 86%, #ffffff 6%);
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: center;
}

.attr-box.flagged {
    border-color: rgba(241, 187, 98, .5);
}

.attr-box.invalid {
    border-color: rgba(216, 47, 47, .55);
}

.attr-box .attr-abbr {
    color: var(--gold);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.attr-box .attr-name {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
}

.attr-box .attr-value {
    font-size: 1.9rem;
    font-weight: 860;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.attr-box .attr-bonus {
    color: var(--accent-hover);
    font-size: .8rem;
    font-weight: 800;
}

.attr-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.attr-controls button {
    width: 40px;
    min-width: 40px;
    min-height: 36px;
    padding: 0;
    font-size: 1.1rem;
}

.attr-readout {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.attr-readout .stat {
    min-width: 84px;
    text-align: center;
}

/* ---------- Fertigkeiten & Stufen ---------- */

.skill-group {
    display: grid;
    gap: 8px;
}

.skill-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.skill-row .skill-name {
    min-width: 0;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.skill-row .skill-cat {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.level-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.level-dot {
    width: 13px;
    height: 13px;
    padding: 0;
    min-height: 0;
    background: #0c1114;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    box-shadow: none;
}

.level-dot.filled {
    background: var(--accent);
    border-color: var(--accent);
}

.level-dot:hover {
    border-color: var(--accent-hover);
    transform: none;
}

/* ---------- Regelverstöße ---------- */

.issues {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.issue {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 700;
}

.issue.error {
    background: rgba(216, 47, 47, .12);
    border: 1px solid rgba(216, 47, 47, .34);
    color: #ffcfcf;
}

.issue.warn {
    background: rgba(241, 187, 98, .1);
    border: 1px solid rgba(241, 187, 98, .3);
    color: #ffe3b4;
}

.issue .issue-field {
    flex: 0 0 auto;
    font-weight: 900;
    text-transform: uppercase;
    font-size: .74rem;
    letter-spacing: .04em;
    padding-top: 2px;
}

/* ---------- Rechner & Würfel ---------- */

.calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    align-items: end;
}

.result-box {
    display: grid;
    gap: 8px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(37, 199, 183, .12), rgba(156, 199, 255, .05));
    border: 1px solid rgba(37, 199, 183, .3);
    border-radius: 8px;
}

.result-box .result-value {
    font-size: 2.3rem;
    font-weight: 880;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.formula {
    color: var(--blue);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: .88rem;
    overflow-wrap: anywhere;
}

.roll-result {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
}

.roll-die {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    place-items: center;
    background: #0c1114;
    border: 2px solid var(--line-strong);
    border-radius: 12px;
    font-size: 1.5rem;
    font-weight: 900;
}

.roll-result.success {
    border-color: rgba(37, 199, 183, .5);
}

.roll-result.success .roll-die {
    border-color: var(--accent);
    color: var(--accent-hover);
}

.roll-result.failure {
    border-color: rgba(216, 47, 47, .45);
}

.roll-result.failure .roll-die {
    border-color: var(--danger);
    color: #ffcfcf;
}

.roll-result.critical .roll-die {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(241, 187, 98, .22);
    color: var(--gold);
}

/* ---------- Charakter-Kacheln ---------- */

.npc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    align-items: start;
}

.npc-card {
    display: grid;
    overflow: hidden;
    background: color-mix(in srgb, var(--panel-strong) 82%, #ffffff 8%);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: border-color .16s ease, transform .16s ease;
}

.npc-card:hover {
    border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
    transform: translateY(-2px);
}

.npc-portrait {
    display: grid;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    place-items: center;
    background: linear-gradient(135deg, rgba(156, 199, 255, .1), transparent), var(--thumb);
    color: var(--muted);
    font-size: 2rem;
    font-weight: 800;
}

.npc-portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.npc-body {
    display: grid;
    gap: 6px;
    padding: 12px;
}

.npc-name {
    font-size: 1rem;
    font-weight: 820;
    overflow-wrap: anywhere;
}

.npc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--muted);
    font-size: .82rem;
}

.tier-badge {
    display: inline-grid;
    min-width: 34px;
    height: 26px;
    padding: 0 8px;
    place-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .02em;
}

.tier-badge.tier-d {
    color: #cfd8dd;
}

.tier-badge.tier-c {
    color: #b7e7ff;
    border-color: rgba(156, 199, 255, .4);
}

.tier-badge.tier-b {
    color: #9dfff2;
    border-color: rgba(37, 199, 183, .45);
}

.tier-badge.tier-a {
    color: #ffe3b4;
    border-color: rgba(241, 187, 98, .5);
}

.tier-badge.tier-s,
.tier-badge.tier-splus {
    background: linear-gradient(135deg, rgba(241, 187, 98, .3), rgba(216, 47, 47, .22));
    border-color: rgba(241, 187, 98, .65);
    color: #fff3d6;
}

/* ---------- Charakterbogen ---------- */

.sheet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}

.sheet.single {
    grid-template-columns: minmax(0, 1fr);
}

.sheet-column {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.sheet-block {
    display: grid;
    gap: 10px;
    padding: 16px;
    background: color-mix(in srgb, var(--panel) 90%, #ffffff 8%);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.sheet-block.accent {
    border-top-color: var(--accent);
}

.sheet-block.blue {
    border-top-color: var(--blue);
}

.sheet-block > h3 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    color: var(--gold);
    font-size: .84rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sheet-block.accent > h3 {
    color: var(--accent-hover);
}

.sheet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.sheet-field {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    border-radius: 7px;
}

.sheet-field > span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sheet-field > strong {
    font-size: .96rem;
    font-weight: 780;
    overflow-wrap: anywhere;
}

.sheet-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sheet-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sheet-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
    padding: 7px 10px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    border-radius: 7px;
    font-size: .9rem;
}

.sheet-list li .lead {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.sheet-portrait {
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--thumb);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.sheet-portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.derived-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.derived {
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    background: #0c1114;
    border: 1px solid var(--line);
    border-radius: 7px;
    text-align: center;
}

.derived strong {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.derived span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.export-box {
    width: 100%;
    min-height: 220px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: .84rem;
    line-height: 1.45;
    white-space: pre;
}

/* ---------- PDF-Leser ---------- */

.pdf-shell {
    display: grid;
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.pdf-shell.no-sidebar {
    grid-template-columns: minmax(0, 1fr);
}

.pdf-sidebar {
    display: grid;
    gap: 12px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding: 14px;
    position: sticky;
    top: 14px;
    background: color-mix(in srgb, var(--panel) 90%, #ffffff 8%);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.pdf-main {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.pdf-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    position: sticky;
    z-index: 5;
    top: 0;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--panel) 94%, #000000 6%);
    border: 1px solid var(--line);
    border-radius: 8px;
    backdrop-filter: blur(8px);
}

.pdf-toolbar button,
.pdf-toolbar .button {
    min-height: 38px;
    padding: 0 12px;
    font-size: .86rem;
}

.pdf-toolbar input[type="number"],
.pdf-toolbar input[type="search"],
.pdf-toolbar input[type="text"],
.pdf-toolbar select {
    min-height: 38px;
    margin-top: 0;
    padding: 6px 10px;
}

.pdf-toolbar .page-input {
    width: 72px;
    text-align: center;
}

.pdf-toolbar .search-input {
    width: min(260px, 42vw);
}

.pdf-toolbar .toolbar-sep {
    width: 1px;
    height: 26px;
    background: var(--line-strong);
}

.pdf-viewport {
    overflow: auto;
    max-height: calc(100vh - 150px);
    padding: 14px;
    background: #05080a;
    border: 1px solid var(--line);
    border-radius: 8px;
    scroll-behavior: smooth;
}

.pdf-page {
    position: relative;
    display: block;
    width: fit-content;
    margin: 0 auto 16px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.pdf-page:last-child {
    margin-bottom: 0;
}

.pdf-page canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

.pdf-page.placeholder {
    display: grid;
    place-items: center;
    background: #1a1f24;
    color: var(--muted);
    font-weight: 800;
}

.pdf-page-label {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 8px;
    background: rgba(9, 13, 16, .72);
    border-radius: 999px;
    color: #e9f4f4;
    font-size: .72rem;
    font-weight: 800;
    pointer-events: none;
}

.pdf-hits {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pdf-hit {
    display: grid;
    gap: 2px;
    width: 100%;
    min-height: 0;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: none;
    color: var(--ink);
    font-size: .84rem;
    font-weight: 600;
    text-align: left;
    white-space: normal;
}

.pdf-hit:hover,
.pdf-hit.active {
    background: rgba(37, 199, 183, .12);
    border-color: var(--accent);
    color: var(--ink);
    transform: none;
}

.pdf-hit .hit-page {
    color: var(--gold);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pdf-hit mark {
    background: rgba(241, 187, 98, .35);
    border-radius: 3px;
    color: #fff3d6;
}

.pdf-shell.fullscreen {
    position: fixed;
    z-index: 60;
    inset: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 10px;
    background: #05080a;
}

.pdf-shell.fullscreen .pdf-sidebar {
    display: none;
}

.pdf-shell.fullscreen .pdf-viewport {
    max-height: calc(100vh - 82px);
}

/* pdf.js-Textebene (Auswahl & Suche) */

.textLayer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: .28;
    line-height: 1;
    forced-color-adjust: none;
    text-size-adjust: none;
    transform-origin: 0 0;
}

.textLayer span,
.textLayer br {
    position: absolute;
    color: transparent;
    cursor: text;
    white-space: pre;
    transform-origin: 0 0;
}

.textLayer .highlight {
    padding: 1px;
    margin: -1px;
    background: rgba(241, 187, 98, .6);
    border-radius: 3px;
}

.textLayer .highlight.selected {
    background: rgba(37, 199, 183, .75);
}

.textLayer ::selection {
    background: rgba(156, 199, 255, .6);
}

/* ---------- PDF-Bibliothek ---------- */

.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
}

.doc-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    background: color-mix(in srgb, var(--panel) 90%, #ffffff 10%);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.doc-card h3 {
    overflow-wrap: anywhere;
}

.doc-card .doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: .82rem;
}

/* ---------- Regel-Browser ---------- */

.rules-shell {
    display: grid;
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.rules-toc {
    display: grid;
    gap: 4px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 14px;
    position: sticky;
    top: 14px;
    background: color-mix(in srgb, var(--panel) 90%, #ffffff 8%);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.rules-toc strong {
    display: block;
    padding: 6px 8px 8px;
    color: var(--gold);
    font-size: .76rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.rules-toc a,
.rules-toc button {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    box-shadow: none;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    white-space: normal;
}

.rules-toc a:hover,
.rules-toc button:hover {
    background: rgba(255, 255, 255, .05);
    color: var(--ink);
    transform: none;
}

.rules-toc a.active,
.rules-toc button.active {
    background: rgba(37, 199, 183, .14);
    border-color: rgba(37, 199, 183, .3);
    color: var(--accent-hover);
}

.rules-body {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.rule-chapter {
    display: grid;
    gap: 14px;
    padding: 18px;
    background: color-mix(in srgb, var(--panel) 90%, #ffffff 8%);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    box-shadow: var(--shadow);
    scroll-margin-top: 18px;
}

.rule-chapter > header {
    display: grid;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.rule-chapter h2 {
    font-size: 1.24rem;
}

.rule-section {
    display: grid;
    gap: 8px;
    scroll-margin-top: 18px;
}

.rule-section h3 {
    color: var(--gold);
}

.rule-section p {
    margin: 0;
    color: #e6eef0;
    overflow-wrap: anywhere;
}

.rule-search {
    margin-bottom: 10px;
}

.rules-shell mark,
.rules-body mark {
    padding: 0 2px;
    background: rgba(241, 187, 98, .32);
    border-radius: 3px;
    color: #fff3d6;
}

/* ---------- Anmeldekarte ---------- */

.auth-card {
    width: min(460px, 100%);
    margin: 0 auto;
}

.auth-switch {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    padding: 4px;
    background: #0c1114;
    border: 1px solid var(--line);
    border-radius: 999px;
}

.auth-switch a,
.auth-switch button {
    flex: 1;
    min-height: 36px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 800;
    text-decoration: none;
}

.auth-switch a.active,
.auth-switch button.active {
    background: var(--accent);
    color: var(--accent-ink);
}

/* ---------- Fehleranzeige von Blazor ---------- */

#blazor-error-ui {
    position: fixed;
    z-index: 1000;
    bottom: 0;
    left: 0;
    display: none;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 18px;
    background: #2a0606;
    border-top: 1px solid rgba(216, 47, 47, .6);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .4);
    color: #ffd7d7;
    color-scheme: dark;
    font-weight: 750;
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 10px;
    right: 14px;
    cursor: pointer;
}

/* ---------- Responsiv ---------- */

@media (max-width: 1100px) {
    .pdf-shell,
    .rules-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .pdf-sidebar,
    .rules-toc {
        position: static;
        max-height: none;
    }
}

@media (max-width: 860px) {
    .attr-controls button,
    .flash-close,
    .level-dot,
    .pdf-toolbar button,
    .pdf-toolbar .button,
    .step-dot,
    .tabs a,
    .tabs button,
    .badge,
    .tag {
        width: auto;
    }

    .attr-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .attr-controls button {
        width: 44px;
    }

    .sheet {
        grid-template-columns: minmax(0, 1fr);
    }

    .pdf-viewport {
        max-height: none;
        padding: 8px;
    }

    .npc-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .skill-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Druck ---------- */

@media print {
    :root {
        color-scheme: light;
    }

    body {
        background: #ffffff;
        color: #111111;
    }

    .no-print,
    .site-header,
    .app-version,
    .top-actions,
    .actions,
    .wizard-steps,
    .pdf-toolbar,
    .rules-toc,
    #blazor-error-ui {
        display: none !important;
    }

    .wrap {
        width: 100%;
        padding: 0;
    }

    .panel,
    .sheet-block,
    .rule-chapter,
    .empty,
    .tile {
        background: #ffffff !important;
        border: 1px solid #cccccc !important;
        box-shadow: none !important;
        color: #111111 !important;
        break-inside: avoid;
    }

    .sheet {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sheet-block > h3,
    .sheet-field > span,
    .rule-section h3 {
        color: #444444 !important;
    }

    .sheet-field,
    .sheet-list li,
    .derived {
        background: #f4f4f4 !important;
        border-color: #dddddd !important;
    }

    a {
        color: #111111 !important;
        text-decoration: none;
    }

    table.data th {
        background: #eeeeee !important;
        color: #333333 !important;
    }

    /* Die Attributwahl bleibt im Druck stehen (sie trägt die Zahl), nur ohne Rahmen. */
    select.attr-choice {
        appearance: none;
        background: transparent !important;
        border: 0 !important;
        color: #111111 !important;
        padding: 0;
        min-width: 0;
    }
}

/* ==========================================================================
   NSC-Datenbank (/npcs) - Werkzeugleiste, Tabellenansicht, Zustandsabzeichen
   ========================================================================== */

.npc-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}

.npc-toolbar > label,
.npc-toolbar > .view-switch,
.npc-toolbar > .button,
.npc-toolbar > button {
    margin-top: 0;
}

.npc-toolbar > label {
    flex: 0 1 190px;
    min-width: 0;
}

.npc-toolbar > label.grow {
    flex: 1 1 260px;
}

/* Kontrollkaestchen bleiben einzeilig neben ihrer Beschriftung. */
.npc-toolbar > label.check {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    font-weight: 800;
    white-space: nowrap;
}

.npc-toolbar > label.check input {
    margin-top: 0;
}

.view-switch {
    display: inline-flex;
    gap: 0;
}

.view-switch .button {
    border-radius: 0;
}

.view-switch .button:first-child {
    border-radius: 8px 0 0 8px;
}

.view-switch .button:last-child {
    border-radius: 0 8px 8px 0;
    margin-left: -1px;
}

.view-switch .button.is-active {
    background: color-mix(in srgb, var(--accent) 22%, #151a1f);
    border-color: var(--accent);
    color: var(--ink);
}

/* Knopf, der wie ein Verweis aussieht (Hinweis unter den Zaehlern). */
.linklike {
    display: inline;
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--accent-hover);
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}

.linklike:hover {
    background: none;
    color: var(--accent);
    transform: none;
}

/* ---------- Sortierbare Spaltenkoepfe ---------- */

.th-sort {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
}

.th-sort:hover {
    background: none;
    color: var(--accent-hover);
    transform: none;
}

.th-sort.is-active {
    color: var(--accent-hover);
}

.th-mark {
    font-size: .7rem;
}

/* ---------- Tabellenansicht der NSC-Datenbank ---------- */

table.data.npc-table td {
    vertical-align: middle;
}

.npc-col-portrait {
    width: 54px;
}

.npc-thumb {
    display: grid;
    overflow: hidden;
    width: 42px;
    height: 56px;
    place-items: center;
    background: var(--thumb);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--muted);
    font-weight: 800;
    text-decoration: none;
}

.npc-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.npc-col-actions {
    white-space: nowrap;
}

.npc-col-actions a {
    color: var(--accent-hover);
    font-weight: 800;
    text-decoration: none;
}

.npc-col-actions a + a::before {
    color: var(--line-strong);
    content: " · ";
}

.npc-col-actions a:hover {
    text-decoration: underline;
}

table.data.npc-table tbody tr.is-deceased td:not(.npc-col-portrait) {
    opacity: .82;
}

table.data.npc-table tbody tr.is-deceased .npc-thumb img {
    filter: grayscale(.7);
}

table.data.npc-table .badge {
    margin-left: 6px;
}

/* ---------- Zustand auf der Kachel ---------- */

.npc-card .npc-portrait {
    position: relative;
}

.npc-card.is-deceased .npc-portrait img {
    filter: grayscale(.7);
}

/* Trauerband ueber der oberen linken Ecke - deutlich sichtbar, aber ohne das Bild
   unkenntlich zu machen. */
.npc-mourning {
    position: absolute;
    top: 16px;
    left: -34px;
    width: 130px;
    padding: 3px 0;
    background: linear-gradient(90deg, #0b0b0b, #23090b);
    border-top: 1px solid rgba(216, 47, 47, .55);
    border-bottom: 1px solid rgba(216, 47, 47, .55);
    color: #ffd7d7;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-45deg);
    pointer-events: none;
}

.npc-status-note {
    color: var(--muted);
    font-size: .78rem;
}

/* Urhebervermerk auf der Charakterkarte: „NSC von Lyra“ bzw. „NSC der Spielleitung“. */
.npc-credit {
    color: var(--muted);
    font-size: .76rem;
    font-style: italic;
}

@media (max-width: 720px) {
    .npc-toolbar > label,
    .npc-toolbar > label.grow {
        flex: 1 1 100%;
    }
}

/* ---------- NSC-Bereich: Kopfzeile, Bildstreifen, Zustand ---------- */

.npc-head {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
    margin-top: 8px;
}

.npc-head-portrait {
    position: relative;
    display: grid;
    overflow: hidden;
    flex: 0 0 auto;
    width: 92px;
    aspect-ratio: 3 / 4;
    place-items: center;
    background: linear-gradient(135deg, rgba(156, 199, 255, .1), transparent), var(--thumb);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 1.5rem;
    font-weight: 800;
}

.npc-head-portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.npc-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.npc-facts a.badge {
    text-decoration: none;
}

/* Entsaettigtes Portrait eines verstorbenen Charakters - im Bereichskopf, auf dem Bogen
   und in der Bildergalerie. Das Trauerband ist die Marke .npc-mourning. */
.npc-head-portrait.is-deceased img,
.sheet-portrait.is-deceased img,
.preview.is-deceased img,
.npc-strip-item.is-deceased img {
    filter: grayscale(.7);
}

.sheet-portrait,
.preview {
    position: relative;
}

/* ---------- Bildstreifen der NSC-Uebersicht ---------- */

.npc-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.npc-strip-item {
    position: relative;
    display: block;
    overflow: hidden;
    width: 108px;
    aspect-ratio: 3 / 4;
    background: var(--thumb);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.npc-strip-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.npc-strip-item .badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    font-size: .68rem;
}

/* ------------------------------------------------------------------ Würfelverlauf
   Der Verlauf soll auf einen Blick lesbar sein: links das Würfelergebnis groß, rechts
   das Urteil, dazwischen wer wofür gewürfelt hat. Farbe trägt nur das Ergebnis. */

.dice-form .dice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin: 12px 0 16px;
}

.dice-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dice-row {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--panel) 90%, #ffffff 8%);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: 8px;
}

.dice-die {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    background: #0c1114;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    font-size: 1.5rem;
    font-weight: 820;
    font-variant-numeric: tabular-nums;
}

.dice-body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.dice-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}

.dice-reason {
    overflow-wrap: anywhere;
    font-weight: 650;
}

.dice-detail,
.dice-time {
    font-size: .84rem;
}

.dice-outcome {
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.dice-row.is-success { border-left-color: var(--accent); }
.dice-row.is-failure { border-left-color: var(--line-strong); }

.dice-row.is-critical-success {
    border-left-color: var(--gold);
    background: linear-gradient(135deg, rgba(241, 187, 98, .14), transparent 60%);
}

.dice-row.is-critical-success .dice-die,
.dice-row.is-critical-success .dice-outcome { color: var(--gold); }

.dice-row.is-critical-failure {
    border-left-color: var(--danger);
    background: linear-gradient(135deg, rgba(216, 47, 47, .16), transparent 60%);
}

.dice-row.is-critical-failure .dice-die,
.dice-row.is-critical-failure .dice-outcome { color: #ffd0d0; }

/* Ein frisch eingetroffener fremder Wurf blitzt kurz auf. */
.dice-row.is-new { animation: dice-arrive .9s ease-out; }

@keyframes dice-arrive {
    from { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--accent); }
    to   { transform: none; box-shadow: none; }
}

@media (max-width: 700px) {
    .dice-row {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .dice-outcome {
        grid-column: 1 / -1;
        text-align: left;
    }
}

/* =====================================================================================
   MODERNISIERUNG (2026-08)

   Bewusst als letzte Schicht über dem gewachsenen Theme: sie ändert die Wirkung, nicht
   die Struktur. Kein Markup musste dafür angefasst werden.

   Was die Oberfläche altbacken wirken ließ und hier behoben wird:
   1. Fast alles war fett gesetzt (700-800) - Navigation, Fließtext, Knöpfe. Ohne
      Gewichtsunterschiede gibt es keine Hierarchie, alles schreit gleich laut.
   2. Der Fokusrahmen stand dauerhaft um die Überschrift, weil Blazor sie nach jeder
      Navigation anspringt. Das sah nach Fehler aus, nicht nach Bedienhilfe.
   3. Flächen ohne Tiefe: gleiche Kante, gleicher Radius, gleicher Ton für alles.
   4. Abstände ohne Rhythmus.
   ===================================================================================== */

:root {
    /* Flächen als Auflage statt eigener Farbe: das trägt jede Schachtelungstiefe. */
    --surface-1: rgba(255, 255, 255, .028);
    --surface-2: rgba(255, 255, 255, .052);
    --hairline: rgba(255, 255, 255, .085);
    --hairline-strong: rgba(255, 255, 255, .14);

    --radius-sm: 9px;
    --radius: 13px;
    --radius-lg: 18px;

    --space-1: 6px;
    --space-2: 10px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 36px;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 6px 20px -8px rgba(0, 0, 0, .55);
    --shadow-3: 0 20px 48px -20px rgba(0, 0, 0, .7);

    --ease: cubic-bezier(.2, .7, .3, 1);
}

body {
    /* Ein einzelner, sehr leiser Farbschimmer oben - genug, damit die Fläche nicht tot wirkt. */
    background:
        radial-gradient(1100px 520px at 50% -280px, rgba(37, 199, 183, .07), transparent 70%),
        linear-gradient(180deg, #0a0e11 0%, #0b1013 60%, #0d1215 100%);
    background-attachment: fixed;
    font-size: 15.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* --- 1. Gewichte: nur wenige Dinge dürfen laut sein ------------------------------- */

h1, h2, h3 { font-weight: 640; letter-spacing: -.012em; }
h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.15; }
h2 { font-size: 1.12rem; }
h3 { font-size: 1rem; }

.muted { color: var(--muted); font-weight: 420; }
label { font-weight: 560; }
.name, .dice-reason { font-weight: 580; }
strong, b { font-weight: 620; }

/* --- 2. Fokus: sichtbar, wo er hilft; unsichtbar, wo Blazor ihn nur hinsetzt ------ */

[tabindex="-1"]:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* --- 3. Kopfzeile: schlank, klebend, mit weichem Grund --------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(10, 14, 17, .82);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--hairline);
}

.brand-title { font-weight: 620; letter-spacing: -.01em; }
.brand-mark { border-radius: 11px; box-shadow: var(--shadow-1); }

.nav-links a,
.mainnav a {
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--muted);
    font-weight: 520;
    text-decoration: none;
    transition: color .16s var(--ease), background .16s var(--ease);
}

.nav-links a:hover,
.mainnav a:hover {
    color: var(--ink);
    background: var(--surface-1);
}

.nav-links a[aria-current="page"],
.mainnav a[aria-current="page"],
.nav-links a.active,
.mainnav a.active {
    color: var(--accent-hover);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    font-weight: 600;
}

/* --- 4. Flächen: Auflage, Haarlinie, weiche Kante -------------------------------- */

.panel,
.album-card,
.tile,
.upload,
.empty,
.maintenance,
.share,
.bulk-bar,
.order-form,
.list-panel,
.doc-card,
.audit-row,
.login form {
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
}

.panel { padding: var(--space-4); margin-bottom: var(--space-3); }
.panel-head { align-items: center; margin-bottom: var(--space-3); }
.compact-panel { border-left: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); }

/* Kacheln heben sich beim Zeigen leicht an, statt die Farbe zu wechseln. */
.tile,
.album-card,
.doc-card {
    transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.tile:hover,
.album-card:hover,
.doc-card:hover {
    transform: translateY(-2px);
    border-color: var(--hairline-strong);
    box-shadow: var(--shadow-3);
}

/* --- 5. Zahlenkacheln: die Zahl ist die Aussage ---------------------------------- */

.stat {
    gap: 2px;
    padding: 12px 16px;
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
}

.stat strong {
    font-size: 1.45rem;
    font-weight: 660;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.stat span {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 620;
    letter-spacing: .09em;
}

/* --- 6. Bedienelemente ----------------------------------------------------------- */

button,
.button {
    min-height: 42px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    font-weight: 580;
    box-shadow: none;
    transition: transform .14s var(--ease), background .14s var(--ease),
                border-color .14s var(--ease), box-shadow .14s var(--ease);
}

button:hover,
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }

button:active,
.button:active { transform: none; box-shadow: none; }

.button {
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    color: var(--ink);
}

.button:hover { background: var(--surface-2); border-color: var(--hairline-strong); }

.button.small, button.small { min-height: 34px; padding: 0 12px; font-size: .88rem; }

input[type="text"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea,
select {
    min-height: 42px;
    padding: 10px 13px;
    background: rgba(0, 0, 0, .26);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}

input::placeholder,
textarea::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }

input:focus,
textarea:focus,
select:focus {
    background: rgba(0, 0, 0, .34);
    border-color: color-mix(in srgb, var(--accent) 70%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    outline: none;
}

/* --- 7. Marken: ruhige Pillen statt bunter Klötze -------------------------------- */

.tag, .badge {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    color: var(--muted);
    font-size: .76rem;
    font-weight: 560;
}

.badge.gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 34%, transparent); }
.badge.danger { color: #ffc4c4; border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

/* --- 8. Meldungen ---------------------------------------------------------------- */

.flash, .error {
    border-radius: var(--radius);
    font-weight: 500;
    box-shadow: var(--shadow-1);
}

/* --- 9. Leerzustände: einladend statt leer --------------------------------------- */

.empty, .empty-state {
    padding: var(--space-5) var(--space-4);
    background: var(--surface-1);
    border: 1px dashed var(--hairline-strong);
}

/* --- 10. Rhythmus ---------------------------------------------------------------- */

.wrap { padding: var(--space-4) var(--space-3) var(--space-5); }
.grid { gap: var(--space-3); }
.albums { gap: var(--space-3); }

/* --- 11. Bewegung nur, wenn erwünscht -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- 12. Nachzügler: Stellen mit höherer Spezifität, die die Schicht oben nicht erreicht --- */

/* Eine Meldung ist ein Satz, keine Schlagzeile. */
.flash .flash-title { font-weight: 600; }
.flash .flash-body { font-weight: 440; }

/* Leerzustände: die Überschrift führt, der Text erklärt ruhig. */
.empty-state .empty-title,
.empty .empty-title,
.empty-state h2,
.empty h2 { font-weight: 620; }

.empty-state .empty-text,
.empty .empty-text { font-weight: 430; color: var(--muted); }

/* Kachel- und Kartentitel */
.album-card h2,
.album-card h3,
.doc-card h3,
.tile .name { font-weight: 600; }

/* Tabellen: Zahlen ausrichten, Kopf ruhig halten */
table { border-collapse: collapse; }

th {
    font-weight: 600;
    color: var(--muted);
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

td, th { padding: 9px 12px; border-bottom: 1px solid var(--hairline); }
tbody tr:hover { background: var(--surface-1); }
td:has(> .num), .num { font-variant-numeric: tabular-nums; }

/* Verweise im Fließtext: unterstrichen erst beim Zeigen, nie fett. */
.panel a:not(.button):not(.link-plain),
.list-panel a:not(.button):not(.link-plain) {
    color: var(--accent-hover);
    font-weight: 520;
    text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
    text-underline-offset: 3px;
}

/* Fußzeile: leise. */
.app-version, .footer-brand { font-weight: 460; }
.footer-brand a { font-weight: 560; }

/* --- 13. Umschalter Spielercharaktere / NSCs -------------------------------------
   Eine Reihe gleichwertiger Register statt eines Auswahlfelds: die Trennung ist eine
   Grundentscheidung der Seite und soll man sehen, nicht suchen. */

.kind-switch {
    display: inline-flex;
    gap: 4px;
    margin-bottom: var(--space-3);
    padding: 4px;
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: 999px;
}

.kind-tab {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--muted);
    font-weight: 540;
    box-shadow: none;
}

.kind-tab:hover {
    background: var(--surface-2);
    color: var(--ink);
    transform: none;
    box-shadow: none;
}

.kind-tab.is-active {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent-hover);
    font-weight: 620;
}

.kind-count {
    padding: 1px 8px;
    background: rgba(0, 0, 0, .3);
    border-radius: 999px;
    color: var(--muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.kind-tab.is-active .kind-count {
    background: rgba(0, 0, 0, .28);
    color: inherit;
}

@media (max-width: 640px) {
    .kind-switch { display: flex; width: 100%; }
    .kind-tab { flex: 1; justify-content: center; padding: 0 10px; }
}

/* --- 14. Kontrollkaestchen: Beschriftung ist Text, keine Ansage ------------------- */

.check-row,
.select-all,
.select-check,
.npc-toolbar label,
.toolbar label { font-weight: 520; }

.check-row input,
.select-all input,
.select-check input { accent-color: var(--accent); }

/* --- 15. Assistent: Pflicht sichtbar von Kuer trennen ---------------------------- */

.step-optional {
    padding: 1px 7px;
    background: rgba(0, 0, 0, .3);
    border-radius: 999px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 560;
    letter-spacing: .04em;
}

/* Kuer-Schritte treten einen Schritt zurueck - sie halten niemanden auf. */
.step-dot.optional:not(.active) { opacity: .74; }

.wizard-todo {
    border-left: 2px solid var(--gold);
}

.wizard-todo.is-complete {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    border-left-color: var(--accent);
}

.wizard-todo-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.wizard-todo-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wizard-todo-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}

.link-step {
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--accent-hover);
    font-weight: 580;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
    text-underline-offset: 3px;
    cursor: pointer;
}

.link-step:hover { transform: none; box-shadow: none; color: var(--ink); }

/* Die Schrittleiste lief rechts aus dem Bild: zehn Schritte passen auf keinen Bildschirm.
   Sie scrollte zwar, aber unsichtbar - besser umbrechen, dann sieht man alle auf einmal. */
.wizard-steps {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 6px;
    padding: 10px;
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
}

/* --- 16. Formularraster: Felder auf einer Linie ---------------------------------- */
/* Ursache des zerfransten Eindrucks: .form-grid richtete die Zellen am unteren Rand aus
   (align-items: end). Sobald ein Hilfetext zwei Zeilen brauchte, sass sein Eingabefeld
   hoeher als das daneben. Jetzt stehen die Felder oben auf einer Linie und die Notizen
   werden nach unten geschoben - dieselbe Ordnung, egal wie lang der Text ist. */

.form-grid { align-items: stretch; }

.form-grid > label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}

.form-grid > label > .field-note { margin-top: auto; padding-top: 2px; }

/* Im Assistenten duerfen die Spalten mitwachsen statt starr zu viert zu stehen. */
.wizard .form-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Ein Kontrollkaestchen ist keine Spalte fuer sich. */
.form-grid .check-row { flex-direction: row; align-items: center; gap: 8px; }

/* --- 17. Genehmigungen ----------------------------------------------------------- */

.approval-row {
    display: grid;
    gap: 8px;
    padding: 14px;
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
}

.approval-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
}

.approval-reason {
    color: var(--gold);
    font-weight: 560;
}

.approval-tiers { font-size: .88rem; }

.approval-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 4px;
}

.approval-reject {
    display: flex;
    flex: 1;
    gap: 8px;
    min-width: 280px;
}

.approval-reject input { flex: 1; }

.role-select {
    min-height: 34px;
    padding: 4px 10px;
    font-size: .86rem;
}

/* --- 18. Anmerkungen am Charakterbogen ------------------------------------------- */

.notes-panel { border-left: 2px solid var(--gold); }

.note-row {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    margin-top: 10px;
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
}

.note-row.is-resolved { opacity: .62; }

.note-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}

.note-text { overflow-wrap: anywhere; }

.note-response {
    padding-left: 10px;
    border-left: 2px solid var(--hairline-strong);
    overflow-wrap: anywhere;
}

.note-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 2px;
}

.note-actions input[type="text"] { flex: 1; min-width: 220px; }

.note-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
}

.note-form .grow { flex: 1; min-width: 260px; }

/* =====================================================================================
   19. VON DER GALERIE ZUR CHARAKTERDATENBANK

   Vorgabe des Betreibers: „Geh weg vom Galerie-Design. Nur im Bild-Dump soll das so
   bleiben, alles andere bekommt den Touch einer Charakterdatenbank."

   Umgesetzt über eine einzige Unterscheidung: Bildraster im Bild-Dump tragen die Klasse
   `gallery-grid` und behalten die Kachel-Optik. Alles andere wird zum Datensatz —
   kantiger, dichter, mit sprechenden Feldbeschriftungen statt großer Bildflächen.
   ===================================================================================== */

/* --- Grundton: Karteikarte statt Schaufenster ------------------------------------ */

.panel,
.list-panel,
.album-card,
.doc-card,
.audit-row,
.approval-row,
.note-row,
.tile:not(.gallery-grid .tile) {
    border-radius: 6px;
    box-shadow: none;
}

.panel,
.list-panel {
    border-left: 2px solid var(--hairline-strong);
}

/* Beschriftungen wie in einem Karteisystem: klein, gesperrt, ruhig. */
.stat span,
.sheet-field span,
.field-note,
th {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .7rem;
}

.field-note { text-transform: none; letter-spacing: .01em; font-size: .8rem; }

/* Zahlen gehören in eine Spalte, nicht ins Layout-Glück. */
.stat strong,
.num,
.dice-die,
.kind-count,
.sheet-field strong { font-variant-numeric: tabular-nums; }

/* --- Bildraster außerhalb des Dumps: Datensatz mit Bild --------------------------- */

.grid:not(.gallery-grid) {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.grid:not(.gallery-grid) .tile {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 0;
    border-radius: 6px;
    border-left: 2px solid var(--hairline-strong);
    transform: none;
}

.grid:not(.gallery-grid) .tile:hover {
    transform: none;
    border-left-color: var(--accent);
    background: var(--surface-2);
}

.grid:not(.gallery-grid) .preview {
    aspect-ratio: 1 / 1;
    border-right: 1px solid var(--hairline);
}

.grid:not(.gallery-grid) .meta {
    gap: 4px;
    padding: 8px 10px;
    font-size: .85rem;
}

.grid:not(.gallery-grid) .name {
    font-weight: 600;
    -webkit-line-clamp: 1;
}

/* --- Alben als Bestandsliste ------------------------------------------------------ */

.albums { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.album-card {
    gap: 10px;
    padding: 12px 14px;
    border-left: 2px solid var(--accent);
}

.album-preview {
    aspect-ratio: 21 / 9;
    border-radius: 4px;
}

/* --- Der Bild-Dump bleibt Galerie ------------------------------------------------- */

.gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}

.gallery-grid .tile {
    display: block;
    border-radius: var(--radius);
    border-left-width: 1px;
    box-shadow: var(--shadow-2);
    transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.gallery-grid .tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-3);
}

.gallery-grid .preview {
    aspect-ratio: 1 / 1;
    border-right: 0;
}

.gallery-grid .meta { padding: 12px; font-size: .9rem; }

/* --- Charakterbogen: Aktenblatt --------------------------------------------------- */

.sheet-block {
    border-radius: 6px;
    border-left: 2px solid var(--hairline-strong);
    box-shadow: none;
}

.sheet-block.accent { border-left-color: var(--accent); }

.sheet-field {
    display: grid;
    grid-template-columns: minmax(110px, 34%) minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid var(--hairline);
}

.sheet-field:last-child { border-bottom: 0; }

/* --- 20. Kategorien: NSC und Spielercharakter getrennt --------------------------- */

.npc-category { margin-bottom: var(--space-4); }

.npc-category > .panel-head {
    align-items: baseline;
    margin-bottom: var(--space-2);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--hairline-strong);
}

.npc-category > .panel-head h2 {
    font-size: .82rem;
    font-weight: 620;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
}

.npc-category > .panel-head .muted {
    font-variant-numeric: tabular-nums;
    font-weight: 620;
}

/* ============================================================================
   21. Katalog und Würfeltisch

   Der Katalog ist eine Arbeitsliste, kein Schaufenster: schmale Zeilen, alles
   Wichtige auf einen Blick, Bearbeiten und Löschen direkt an der Zeile. Der
   Würfeltisch stellt Konsole und Verlauf nebeneinander, damit man den eigenen
   Wurf und die der anderen gleichzeitig sieht.
   ========================================================================= */

/* --- gemeinsame Kleinteile --- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-strong);
    font-size: .78rem;
    color: var(--muted);
    white-space: nowrap;
}

.chip.own {
    border-color: var(--accent);
    color: var(--accent);
}

.chip.feeding {
    border-color: #a4506a;
    color: #e79ab3;
}

.tab-count {
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--panel-strong);
    font-size: .75rem;
    color: var(--muted);
}

.tabs button {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: .6rem .9rem;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
}

.tabs button:hover {
    color: var(--ink);
}

.tabs button.active {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

.segmented {
    display: flex;
    gap: .25rem;
    padding: .25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-strong);
}

.segment {
    flex: 1;
    padding: .45rem .6rem;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
}

.segment:hover {
    color: var(--ink);
}

.segment.active {
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 1px 3px rgb(0 0 0 / .35);
}

/* --- Katalogliste --- */

.catalog-group + .catalog-group {
    margin-top: 1.6rem;
}

.catalog-group > h3 {
    margin: 0 0 .5rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
}

.catalog-group > h3 .muted {
    margin-left: .5rem;
    font-weight: 400;
    font-size: .85rem;
}

.catalog-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .35rem;
}

.catalog-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .75rem;
    align-items: start;
    padding: .6rem .75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-strong);
}

.catalog-row.editing {
    border-color: var(--accent);
}

.catalog-pick {
    padding-top: .15rem;
}

.catalog-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .2rem;
}

.catalog-text {
    margin: 0;
    color: var(--ink);
}

.catalog-meta {
    margin: .3rem 0 0;
    font-size: .85rem;
    color: var(--muted);
}

.catalog-meta .label {
    display: inline-block;
    min-width: 5.5rem;
    color: var(--muted);
    opacity: .75;
}

.catalog-schema {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .3rem .9rem;
    margin: .45rem 0 0;
    font-size: .85rem;
}

.catalog-schema div {
    display: flex;
    gap: .4rem;
}

.catalog-schema dt {
    color: var(--muted);
    opacity: .75;
    min-width: 5.5rem;
}

.catalog-schema dd {
    margin: 0;
}

.catalog-actions {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* --- Würfeltisch --- */

.dice-table {
    display: grid;
    grid-template-columns: minmax(320px, 26rem) 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 900px) {
    .dice-table {
        grid-template-columns: 1fr;
    }
}

.dice-console h2,
.dice-history h2 {
    margin-top: 0;
}

.dice-preview {
    margin: .8rem 0;
    padding: .6rem .75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-strong);
}

.dice-preview strong {
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
}

.dice-preview .muted {
    display: block;
    margin-top: .2rem;
    font-size: .85rem;
}

.button.big {
    width: 100%;
    padding: .8rem;
    font-size: 1.05rem;
}

.dice-result {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: 1rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.dice-result p {
    margin: .2rem 0 0;
}

.dice-die.big {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.5rem;
}

.dice-history {
    max-height: 78vh;
    overflow-y: auto;
}

.dice-reason {
    margin: .15rem 0;
}

.dice-detail {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .2rem 0 0;
    font-size: .85rem;
}

.dice-time {
    font-size: .8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* --- Auswahl aus dem Katalog (Assistent) --- */

.catalog-picker {
    margin-top: .6rem;
}

.catalog-picker-body {
    margin-top: .6rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-strong);
}

.catalog-picks {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: grid;
    gap: .3rem;
    max-height: 22rem;
    overflow-y: auto;
}

.catalog-pick-row {
    display: block;
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.catalog-pick-row:hover {
    border-color: var(--accent);
}

.catalog-pick-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
}

.catalog-pick-text,
.catalog-pick-meta {
    display: block;
    margin-top: .15rem;
    font-size: .85rem;
    color: var(--muted);
}

/* Die allgemeine .form-grid ist vierspaltig und mindestens 180px je Spalte — in der schmalen
   Würfelkonsole und im Katalog-Editor sprengt das die Spalte. Dort zwei Spalten, die auch
   schrumpfen dürfen (minmax(0, …), sonst erzwingt der Inhalt wieder die Mindestbreite). */
.dice-console .form-grid,
.editor .form-grid,
.catalog-picker .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dice-console .form-grid > label,
.editor .form-grid > label,
.catalog-picker .form-grid > label {
    min-width: 0;
}

.dice-console input,
.dice-console select,
.editor input,
.editor select,
.editor textarea {
    width: 100%;
    max-width: 100%;
}

.editor label.block,
.dice-console label.block {
    display: block;
    margin-bottom: .75rem;
}

@media (max-width: 560px) {
    .dice-console .form-grid,
    .editor .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================================
   22. Story-Bereich

   Karten für die Übersicht, ein ruhiger Lesetext für den einzelnen Eintrag.
   Entwürfe bekommen einen gestrichelten Rand: sie sehen sichtbar anders aus als
   das, was die Spieler zu sehen bekommen.
   ========================================================================= */

.story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.story-card {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.story-card.is-draft {
    border-style: dashed;
    opacity: .88;
}

.story-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.story-kind {
    font-size: 1.3rem;
    line-height: 1;
}

.chip.draft {
    border-color: var(--gold);
    color: var(--gold);
}

.story-title {
    margin: .1rem 0;
    font-size: 1.15rem;
}

.story-title a {
    color: var(--ink);
    text-decoration: none;
}

.story-title a:hover {
    color: var(--accent);
}

.story-teaser {
    margin: 0;
}

.story-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .3rem;
}

.story-tags a.chip {
    text-decoration: none;
}

.story-tags a.chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.story-meta {
    margin-top: auto;
    padding-top: .4rem;
}

/* --- einzelner Eintrag --- */

.story-summary {
    margin: .6rem 0 0;
    font-size: 1.05rem;
    color: var(--ink);
}

.story-body {
    max-width: 68ch;
    margin-top: 1rem;
    line-height: 1.65;
}

.story-body p {
    margin: 0 0 .9rem;
}

.story-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .8rem;
}

.story-image {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.story-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--thumb);
}

.story-documents {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .4rem;
}

.story-documents li {
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* Die Abteilungsleiste eines Rollenspiels erbt sonst das dreispaltige .toolbar-Raster und
   zerfällt ab dem siebten Reiter in volle Zeilen. Sie ist eine Reiterleiste, kein Formular:
   nebeneinander, so breit wie nötig, Umbruch erst wenn der Platz fehlt. */
nav.campaign-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

nav.campaign-tabs > a {
    flex: 0 0 auto;
}

/* ============================================================================
   23. Würfelkonsole im Rollenspiel

   Die alte Seite zeigte neun Felder gleichzeitig, auch die, die zur gewählten
   Wurfart gar nicht gehören. Jetzt entscheidet die Art oben, was darunter steht;
   die Zielzahl rechnet sich sichtbar mit, bevor der Würfel fällt.
   ========================================================================= */

.dice-console-layout {
    display: grid;
    grid-template-columns: minmax(340px, 28rem) 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1000px) {
    .dice-console-layout {
        grid-template-columns: 1fr;
    }
}

.segment-icon {
    margin-right: .35rem;
}

/* --- Felder der gewählten Wurfart --- */

.dice-pick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .6rem;
    margin-bottom: .8rem;
}

.dice-pick > label,
.dice-console label.block {
    min-width: 0;
}

.dice-console label.block {
    display: block;
    margin-bottom: .8rem;
}

.dice-console .field-note {
    display: block;
    margin-top: .2rem;
    font-size: .78rem;
    color: var(--muted);
}

/* --- Vor- und Nachteil als Regelstufen, nicht als freies Zahlenfeld --- */

.dice-modifiers,
.dice-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .9rem;
}

.mod-chip {
    padding: .35rem .7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-strong);
    color: var(--muted);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

.mod-chip:hover {
    color: var(--ink);
    border-color: var(--line-strong);
}

.mod-chip.active {
    border-color: var(--accent);
    color: var(--accent-ink);
    background: var(--accent);
    font-weight: 600;
}

.dice-filter-select {
    padding: .3rem .5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-strong);
    color: var(--muted);
    font-size: .85rem;
}

/* --- Abwurf: Zielzahl und Knopf nebeneinander --- */

.dice-launch {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-strong);
}

.dice-target {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.dice-target strong {
    font-size: 1.9rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.dice-throw {
    margin-left: auto;
    padding: .7rem 1.4rem;
    font-size: 1.02rem;
    white-space: nowrap;
}

.dice-secret {
    margin-top: .7rem;
}

/* --- Verlauf --- */

.dice-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .3rem;
}

.dice-row.is-secret {
    border-style: dashed;
}

.chip.secret {
    border-color: var(--gold);
    color: var(--gold);
}

.dice-history .dice-list {
    max-height: 70vh;
    overflow-y: auto;
}

/* Die Verdeckt-Zeile erbt sonst das label-Layout der Konsole (Beschriftung über dem Feld)
   und bricht dadurch um. Hier gehören Kästchen und Text nebeneinander. */
.dice-console label.dice-secret {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .8rem 0 0;
    font-weight: 500;
    font-size: .88rem;
    color: var(--muted);
}

.dice-console label.dice-secret input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

/* Der Charakterfilter ist ein Filter, kein Formularfeld — er soll so breit sein wie sein
   Inhalt und sich neben die Chips stellen, nicht über die ganze Zeile gehen. */
.dice-filters .dice-filter-select {
    width: auto;
    max-width: 14rem;
    margin: 0;
}

.dice-console .dice-launch {
    margin-top: .2rem;
}

/* ============================================================================
   24. Charakterbogen — Felder, die sich der Breite beugen

   Vorher war .sheet-field ein starres Raster aus „mindestens 110 px Beschriftung"
   und „Rest". Steht so ein Feld in einer schmalen Spalte, bleiben für den Wert
   dreißig Pixel übrig — der Text fiel dann Buchstabe für Buchstabe untereinander.

   Jetzt ist es ein Flex-Zeilenumbruch: Beschriftung und Wert stehen nebeneinander,
   solange beide Platz haben, und der Wert rutscht ganz in die nächste Zeile, sobald
   es eng wird. Das ist genau das Verhalten, das man von einem Bogen erwartet.
   ========================================================================= */

.sheet-field {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    grid-template-columns: none;
}

.sheet-field > span {
    flex: 0 0 auto;
    min-width: 6rem;
}

/* flex-basis 9rem: darunter lohnt die zweite Spalte nicht, dann bricht der Wert um. */
.sheet-field > strong {
    flex: 1 1 9rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Ein Feldpaar braucht Platz für Beschriftung und Wert; 150 px waren zu wenig. */
.sheet-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* --- Spezialfähigkeiten als eigene Karten --------------------------------- */

.ability-card {
    display: grid;
    gap: .4rem;
    padding: .7rem .8rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    border-left: 2px solid var(--accent);
    border-radius: 7px;
}

.ability-card + .ability-card {
    margin-top: .5rem;
}

.ability-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}

.ability-head h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 720;
}

.ability-target {
    flex: 0 0 auto;
    padding: .1rem .5rem;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ability-basis {
    color: var(--muted);
    font-size: .8rem;
}

.ability-effect {
    margin: 0;
    overflow-wrap: anywhere;
}

.ability-facts {
    display: grid;
    gap: .2rem;
    margin: 0;
}

.ability-facts > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
}

.ability-facts dt {
    flex: 0 0 auto;
    min-width: 6rem;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ability-facts dd {
    flex: 1 1 9rem;
    min-width: 0;
    margin: 0;
    font-size: .88rem;
    overflow-wrap: anywhere;
}

.ability-actions {
    margin-top: .1rem;
}

/* --- Breite Blöcke über den Spalten ---------------------------------------
   Attribute, Fertigkeiten und Kampfwerte sind Tabellen. In einer 320-px-Spalte
   endeten sie hinter dem Rand; jetzt laufen sie über die volle Breite und
   stehen oben, wo man sie im Spiel zuerst braucht. */

.sheet-block.wide {
    grid-column: 1 / -1;
}

.sheet-block.wide .table-scroll {
    overflow-x: auto;
}

.sheet-block.wide table.data {
    width: 100%;
    min-width: 0;
}

/* Die Spalten daneben dürfen ruhig etwas breiter werden — drei sehr schmale
   Spalten sind unruhiger zu lesen als zwei ordentliche. */
.sheet {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

/* Erklärtexte unter den Tabellen sind Fußnoten, keine Absätze. */
.sheet-block.wide > .muted.small {
    max-width: 90ch;
    font-size: .78rem;
    line-height: 1.5;
}

/* --- Lebenspunkte als Balken --------------------------------------------- */

.hp-bar {
    display: grid;
    gap: .3rem;
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
}

.hp-bar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.hp-bar-head span {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.hp-bar-head strong {
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
}

.hp-track {
    height: 9px;
    border-radius: 999px;
    background: #0c1114;
    border: 1px solid var(--line);
    overflow: hidden;
}

.hp-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .25s ease;
}

.hp-fill.is-fine     { background: var(--accent); }
.hp-fill.is-hurt     { background: var(--gold); }
.hp-fill.is-critical { background: var(--danger); }
.hp-fill.is-out      { background: var(--line-strong); }

/* --- Punkte gegen das Tier-Budget ---------------------------------------- */

.derived.is-fine  { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.derived.is-under { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.derived.is-over  { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }

.derived.is-over strong  { color: var(--danger); }
.derived.is-under strong { color: var(--gold); }

/* ============================================================================
   25. Rechner

   „align-items: end" ließ kurze Felder an der Unterkante einer Zeile kleben,
   deren Höhe ein langes Feld mit Fußnote vorgab — darüber blieb eine Lücke.
   Oben ausrichten stellt die Bedienelemente auf eine Linie und lässt die
   Fußnoten nach unten hängen, wo sie hingehören.
   ========================================================================= */

.calc-grid {
    align-items: start;
}

.calc-grid > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.calc-grid .field-note {
    line-height: 1.45;
}

/* --- Erfolgschance ------------------------------------------------------- */

.chance {
    display: grid;
    gap: .25rem;
    margin: .2rem 0;
}

.chance-track {
    height: 8px;
    border-radius: 999px;
    background: #0c1114;
    border: 1px solid var(--line);
    overflow: hidden;
}

.chance-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .2s ease;
}

.chance-fill.is-good { background: var(--accent); }
.chance-fill.is-even { background: var(--gold); }
.chance-fill.is-poor { background: var(--danger); }

.calc-note {
    max-width: 90ch;
    margin: 0 0 .9rem;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.5;
}

/* Kontrollkästchen im Rechner: Kästchen und Text nebeneinander, nicht übereinander. */
.calc-grid > label.calc-check {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    padding-top: 1.55rem;
}

.calc-grid > label.calc-check input {
    flex: 0 0 auto;
}

/* --- Aufstiegsleiter: Tier, Rang und was der nächste Schritt bringt -------- */

.ladder {
    display: grid;
    gap: .4rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-left: 2px solid var(--gold);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
}

.ladder-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.ladder-head span {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ladder-head strong {
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    color: var(--gold);
}

/* Die fünf Ränge eines Tiers als Punkte — der kleine Schritt, sichtbar gemacht. */
.ladder-ranks {
    display: flex;
    gap: .35rem;
}

.ladder-pip {
    flex: 1 1 0;
    height: 6px;
    border-radius: 999px;
    background: #0c1114;
    border: 1px solid var(--line);
}

.ladder-pip.is-done {
    background: var(--gold);
    border-color: var(--gold);
}

/* Und der große Schritt: wie weit auf der ganzen Leiter von D·1 bis S+·5. */
.ladder-track {
    height: 5px;
    border-radius: 999px;
    background: #0c1114;
    border: 1px solid var(--line);
    overflow: hidden;
}

.ladder-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
}

/* Rangpunkte und Gesamtbalken sind zwei verschiedene Aussagen — sie brauchen Abstand,
   sonst liest man sie als eine einzige Leiste. */
.ladder-ranks { margin-bottom: .15rem; }
.ladder-track { margin-bottom: .25rem; opacity: .75; }

/* Das Macht-Tier steht neben den Punktekacheln — auch bei NSC, wo kein Budget daran hängt.
   Es ist die Einordnung der Figur und gehört sichtbar an dieselbe Stelle. */
.point-pool.tier-pool strong {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
}

/* --- Spielerverwaltung ----------------------------------------------------- */

.player-new {
    margin-top: .6rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-strong);
}

/* Das Umbenennen-Feld steht in einer Aktionsspalte — es darf sie nicht sprengen. */
.rename-form {
    display: flex;
    gap: .3rem;
    align-items: center;
}

.rename-form input {
    width: 9rem;
    min-width: 0;
    padding: .25rem .4rem;
    font-size: .85rem;
}

/* ============================================================================
   26. Übersicht eines Rollenspiels

   Vorher: eine Zählerleiste im Kopf, deren Zahlen unten auf den Karten noch einmal
   standen, dazu sieben gleich aussehende Karten mit je einem „Öffnen"-Knopf.
   Jetzt ist die Kachel selbst der Knopf, die Zahl steht groß darauf, und das
   Regelwerk führt die Reihe an.
   ========================================================================= */

.area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .7rem;
    margin-bottom: .8rem;
}

.area-tile {
    display: grid;
    grid-template-areas:
        "icon  count"
        "name  name"
        "note  note";
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .15rem .6rem;
    padding: .8rem .9rem;
    border: 1px solid var(--line);
    border-left: 2px solid var(--line-strong);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 90%, #ffffff 8%);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

.area-tile:hover,
.area-tile:focus-visible {
    border-color: var(--accent);
    border-left-color: var(--accent);
    transform: translateY(-1px);
}

.area-icon {
    grid-area: icon;
    font-size: 1.5rem;
    line-height: 1;
}

.area-count {
    grid-area: count;
    justify-self: end;
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

.area-name {
    grid-area: name;
    margin-top: .35rem;
    font-weight: 700;
}

.area-note {
    grid-area: note;
    font-size: .78rem;
    color: var(--muted);
}

/* Das Regelwerk ist der Einstieg — es führt die Reihe an und darf breiter sein. */
.area-tile.is-lead {
    grid-column: span 2;
    border-left-color: var(--accent);
    background: linear-gradient(135deg, rgba(45, 212, 191, .10), transparent 60%);
}

@media (max-width: 520px) {
    .area-tile.is-lead { grid-column: span 1; }
}

.area-links {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
}

/* Der Gastname wird selten geändert — eingeklappt, damit er nicht die halbe Übersicht füllt. */
.guest-name > summary {
    cursor: pointer;
    color: var(--muted);
    font-size: .85rem;
}

.guest-name > summary:hover {
    color: var(--ink);
}

.guest-name[open] > summary {
    margin-bottom: .5rem;
}