/* Bilderwebseite 2.1 — restrained, accessible interface; no external fonts. */
:root {
    --bg:#f4f6f8; --panel:#ffffff; --text:#192530; --muted:#5e6c79;
    --line:#dbe1e7; --accent:#20577a; --accent-hover:#163f5a;
    --danger:#a82121; --ok:#176141; --radius:4px; --radius-sm:3px;
    --focus:#168ab5; --nav:#172733;
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { color-scheme:light; }
body { margin:0; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:15px; line-height:1.55; color:var(--text); background:var(--bg); }
a { color:var(--accent); text-decoration:none; text-underline-offset:3px; }
a:hover { text-decoration:underline; }
h1,h2,h3 { color:inherit; line-height:1.25; font-weight:650; overflow-wrap:anywhere; }
h1 { font-size:clamp(1.55rem,2.7vw,2.05rem); letter-spacing:-.035em; margin:0 0 .65rem; }
h2 { font-size:1.22rem; letter-spacing:-.015em; margin:1.5rem 0 .8rem; }
h3 { font-size:1rem; margin:0 0 .65rem; }
p { margin:.65rem 0 1rem; }
.panel>h2:first-child { margin-top:0; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
button:disabled,input:disabled,select:disabled { opacity:.55; cursor:not-allowed; }
.skip-link { position:fixed; top:-100px; left:12px; z-index:10000; padding:.75rem 1rem; background:#fff; }
.skip-link:focus { top:12px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:1.3rem; padding:.85rem max(1.4rem,calc((100vw - 1480px)/2)); background:var(--nav); color:#eaf0f4; border-bottom:3px solid #37647c; position:sticky; top:0; z-index:500; min-height:64px; }
.brand { font-size:1.05rem; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.topbar a { color:#f3f6f8; }
.topbar nav { display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; font-size:.9rem; }
.user-pill,.session-label { color:#b9cbd6; font-size:.8rem; border-left:1px solid #536875; padding-left:1rem; }
.topbar .nav-logout { font:inherit; background:transparent; border:0; color:#eaf0f4; min-height:30px; padding:0; border-radius:0; text-decoration:underline; text-underline-offset:4px; }
.container { width:min(1480px,calc(100% - 3rem)); margin:2rem auto 3rem; min-width:0; }
.footer { border-top:1px solid var(--line); padding:1.4rem 1.5rem; color:var(--muted); font-size:.8rem; text-align:center; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; margin:0 0 1.5rem; }
.page-heading>div:first-child { min-width:0; }
.page-heading .muted,.gallery-intro { margin:.5rem 0 0; }
.page-heading>.actions { flex-shrink:0; justify-content:flex-end; max-width:52%; }
.eyebrow,.card-kicker { text-transform:uppercase; letter-spacing:.11em; font-size:.7rem; font-weight:700; color:var(--muted); margin:0 0 .45rem; }
.breadcrumb { font-size:.88rem; margin-bottom:1.4rem; }
.gallery-intro { max-width:80ch; }
.card,.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); }
.panel { padding:1.5rem; margin-bottom:1.4rem; min-width:0; }
.form-panel { max-width:1100px; }
.panel form h2 { border-top:1px solid var(--line); padding-top:1.4rem; margin-top:1.7rem; }
.grid { display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.gallery-grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); grid-auto-rows:1fr; }
.media-grid { grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); grid-auto-rows:1fr; }
.gallery-card,.media-card { padding:0; overflow:hidden; display:flex; flex-direction:column; min-width:0; transition:border-color .15s,box-shadow .15s; }
.gallery-card:hover,.media-card:hover { border-color:#a8bcc9; box-shadow:0 3px 12px #182a3810; }
.gallery-cover,.media-preview { position:relative; display:flex; align-items:center; justify-content:center; height:220px; min-height:220px; overflow:hidden; background:#e8edf1; }
.gallery-cover img,.media-preview img { width:100%; height:100%; display:block; object-fit:cover; }
.audio-card .media-preview,.gallery-cover-audio { background:#162632; }
.audio-card .media-preview img,.gallery-cover-audio img { object-fit:contain; }
.gallery-cover-placeholder,.video-placeholder { width:100%; height:100%; display:flex; flex-direction:column; gap:.5rem; align-items:center; justify-content:center; background:#e8edf1; color:#526b7b; }
.gallery-cover-placeholder>span { font-size:.65rem; letter-spacing:.2em; }
.gallery-cover-placeholder>strong { font-size:.9rem; font-weight:500; }
.video-placeholder>span { font-size:2rem; }
.play-badge,.cover-label { position:absolute; right:.7rem; bottom:.7rem; padding:.25rem .55rem; border:1px solid #ffffff38; background:#172733e8; color:#fff; border-radius:var(--radius-sm); font-size:.73rem; font-weight:600; }
.gallery-card-body,.media-body { display:flex; flex-direction:column; flex:1; min-width:0; padding:1.15rem; }
.gallery-card h2,.media-card h2 { font-size:1.1rem; line-height:1.4; margin:0 0 .65rem; min-height:3.08rem; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.gallery-card h2 a,.media-card h2 a { color:var(--text); }
.gallery-description { margin:0 0 1.15rem; min-height:4.35em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; line-height:1.45; font-size:.87rem; }
.meta,.help { font-size:.85rem; line-height:1.6; color:var(--muted); overflow-wrap:anywhere; }
.media-body>.meta { margin-bottom:1.1rem; }
.muted { color:var(--muted); }
.actions,.form-actions,.admin-menu { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; }
.actions { margin:.8rem 0; }
.form-actions { margin:1.5rem 0 .2rem; border-top:1px solid var(--line); padding-top:1.2rem; }
.card-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin:0; padding-top:.2rem; margin-top:auto; }
.btn,button,input[type="submit"] { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:38px; border:1px solid transparent; border-radius:var(--radius-sm); padding:.55rem .9rem; font:600 .88rem/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--accent); color:#fff; cursor:pointer; white-space:nowrap; text-decoration:none; vertical-align:middle; }
.btn:hover,button:hover,input[type="submit"]:hover { background:var(--accent-hover); color:#fff; text-decoration:none; }
.btn.secondary,button.secondary { background:#f8fafb; border-color:#cbd5dd; color:#304b5e; }
.btn.secondary:hover,button.secondary:hover { background:#eaf0f4; border-color:#a7bbc9; color:#203e51; }
.btn.danger,button.danger { background:var(--danger); color:#fff; }
.btn.small,button.small { min-height:34px; font-size:.8rem; padding:.4rem .65rem; line-height:1.2; }
.card-actions>* { width:100%; min-width:0; }
form.inline { display:inline; }
input,textarea,select { font:inherit; width:100%; max-width:100%; color:var(--text); background:#fff; border:1px solid #c8d2db; border-radius:var(--radius-sm); padding:.6rem .7rem; }
input[type="checkbox"],input[type="radio"] { width:auto; margin:0; accent-color:var(--accent); flex-shrink:0; }
input[readonly] { background:#f2f5f7; }
input[type="file"] { font-size:.88rem; }
input[type="file"]::file-selector-button { border:1px solid var(--line); background:#edf2f5; border-radius:3px; padding:.35rem .65rem; margin-right:.65rem; color:var(--text); cursor:pointer; }
textarea { min-height:120px; resize:vertical; }
label { display:block; margin:.9rem 0 .35rem; font-size:.89rem; font-weight:600; }
.check-label { display:flex; gap:.65rem; align-items:flex-start; font-weight:500; }
.check-label input { margin-top:.28rem; }
.form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.form-row-button { grid-template-columns:minmax(0,1fr) auto; align-items:end; }
.permission-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.55rem; margin-top:.6rem; }
.permission-item { display:flex; align-items:flex-start; gap:.65rem; border:1px solid var(--line); border-radius:3px; padding:.75rem; margin:0; background:#fff; font-size:.83rem; font-weight:500; }
.permission-item input { margin-top:.25rem; }
.flash { padding:.85rem 1rem; border:1px solid var(--line); border-left-width:4px; border-radius:3px; margin:0 0 1.2rem; background:#fff; }
.flash-success { border-color:#abd0bd; background:#eef8f2; color:var(--ok); }
.flash-error { border-color:#d89696; border-left-color:#b42323; background:#fff0ef; color:#a11919; font-weight:600; }
.flash-info { border-color:#abc9de; background:#eef5fb; color:#235675; }
.access-error { font-size:1rem; padding:1.05rem 1.15rem; margin:1.25rem 0; }
.access-panel { max-width:660px; margin:3rem auto; padding:2rem; }
.access-context { display:flex; align-items:center; gap:.65rem; font-size:.83rem; color:#455e70; padding:.7rem .9rem; background:#eaf0f4; border-left:3px solid #8da9ba; margin:-.4rem 0 1.4rem; border-radius:2px; }
.access-indicator { width:7px; height:7px; background:#527d92; flex-shrink:0; }
.empty-state { padding:3rem 2rem; text-align:center; }
.empty-state h2 { margin-top:0; }
.detail-navigation { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.3rem; font-size:.88rem; }
.detail-layout { display:grid; grid-template-columns:minmax(0,3fr) minmax(300px,1fr); align-items:start; gap:1.4rem; }
.detail-main-panel { min-width:0; }
.detail-media { text-align:center; }
.detail-media>img,.detail-media>video { width:100%; max-height:82vh; object-fit:contain; display:block; background:#111b23; border-radius:3px; }
.detail-media>img[data-media-id] { cursor:zoom-in; }
.inline-edit-details { border:1px solid var(--line); border-radius:3px; padding:.6rem .8rem; margin:.5rem 0 1rem; background:#f8fafb; }
summary { cursor:pointer; font-weight:600; }
.compact-form { margin-top:.65rem; }
.exif-details summary { padding:.2rem 0; }
.exif-details[open] summary { margin-bottom:1rem; }
.table { width:100%; border-collapse:collapse; font-size:.87rem; background:#fff; }
.table th,.table td { padding:.8rem .7rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.table th { background:#f2f5f7; font-weight:600; }
.table td>.btn,.table td>form.inline { margin:0 .2rem .3rem 0; }
.table-wrap { width:100%; overflow:auto; }
.table-wrap>.table { min-width:560px; }
.detail-layout aside .table { table-layout:fixed; }
.detail-layout aside .table th { width:43%; }
.exif-table { table-layout:fixed; font-size:.81rem; }
.exif-table code { white-space:pre-wrap; word-break:break-word; }
.comment { padding:1rem 0; border-bottom:1px solid var(--line); }
.comment:last-child { border:0; }
.comment>.muted { font-size:.82rem; margin-left:.5rem; }
.section-heading { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:.9rem; }
.section-heading h2 { margin:0; }
.section-heading span { font-size:.82rem; }
.gallery-map { width:100%; height:360px; min-width:0; border:1px solid var(--line); border-radius:3px; overflow:hidden; isolation:isolate; background:#e3eaf0; }
.gallery-map .leaflet-tile { max-width:none!important; max-height:none!important; width:256px!important; height:256px!important; object-fit:fill!important; border-radius:0!important; box-shadow:none!important; }
.map-count { display:grid!important; place-items:center; background:#20577a; color:#fff; border:2px solid #fff; border-radius:50%; font-weight:700; box-shadow:0 1px 4px #0004; }
.map-media-popup { max-width:290px; }
.map-media-popup img { width:100%; height:155px; object-fit:contain; cursor:pointer; margin-bottom:.6rem; }
.map-media-popup strong { display:block; overflow-wrap:anywhere; }
.map-media-popup select { width:100%; margin-bottom:.5rem; }
.map-media-popup .card-actions { margin-top:.8rem; }
.leaflet-popup-content-wrapper { border-radius:4px!important; }
.map-frame { display:block; width:100%; height:340px; border:1px solid var(--line); border-radius:3px; background:#e5ebef; }
.pagination { display:flex; gap:1rem; align-items:center; justify-content:center; padding:2rem 0 .5rem; font-size:.9rem; }
/* Audio player and chapter navigation, both in the detail page and the viewer. */
.audio-detail,.viewer-audio { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.8fr); gap:1.2rem; align-items:start; text-align:left; min-width:0; }
.audio-cover-player { min-width:0; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.audio-cover-player>img { width:100%; height:auto; max-height:55vh; object-fit:contain; border-radius:3px; background:#192733; }
.audio-cover-player>audio { width:100%; min-height:54px; }
.chapter-panel { min-width:0; background:#f4f7f9; border:1px solid var(--line); border-radius:3px; padding:1rem; }
.chapter-toolbar { display:flex; gap:.5rem; margin-bottom:.7rem; }
.chapter-toolbar>.btn { flex:1; }
.chapter-list { margin:0; padding:0; list-style:none; max-height:390px; overflow:auto; overscroll-behavior:contain; }
.chapter-list li { margin:0; padding:0; }
.chapter-item { width:100%; display:grid; grid-template-columns:5.5em minmax(0,1fr); align-items:start; gap:.5rem; background:transparent; color:var(--text); border:0; border-bottom:1px solid var(--line); border-radius:0; padding:.8rem .45rem; text-align:left; font-weight:500; white-space:normal; line-height:1.5; }
.chapter-item:hover { background:#e4edf3; color:var(--text); }
.chapter-item.is-active { background:#dfeef5; color:#174b66; box-shadow:inset 3px 0 #28789f; font-weight:700; }
.chapter-time { font-variant-numeric:tabular-nums; color:#536e7e; font-size:.8rem; }
.chapter-title { min-width:0; overflow-wrap:anywhere; }
.chapter-message:empty { display:none; }
.chapter-editor { min-height:220px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.86rem; }
/* Viewer: images always contain-fit; audio leaves room for controls and chapters. */
.screen-viewer,.media-dialog { background:#0a1117; color:#f4f7fa; width:100vw; height:100vh; height:100dvh; max-width:100vw; max-height:100dvh; margin:0; padding:0; border:0; border-radius:0; overflow:hidden; }
.screen-viewer { position:fixed; inset:0; z-index:1000; }
.media-dialog::backdrop { background:#000e; }
.viewer-stage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; }
.viewer-stage>img,.viewer-stage>video { min-width:0; min-height:0; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; background:#0a1117; }
.viewer-stage.is-audio { inset:95px 24px 98px; overflow:auto; align-items:center; }
.viewer-audio { width:min(1060px,100%); max-height:100%; margin:auto; padding:8px; grid-template-columns:minmax(200px,1fr) minmax(270px,.85fr); }
.viewer-audio .audio-cover-player>img { max-height:calc(100dvh - 290px); }
.viewer-audio .chapter-panel { background:#142530; border-color:#304653; color:#e4edf3; }
.viewer-audio .chapter-list { max-height:calc(100dvh - 370px); min-height:90px; }
.viewer-audio .help { color:#b7c7d3; }
.viewer-audio .chapter-item { color:#dce9f1; border-color:#354753; }
.viewer-audio .chapter-item:hover { background:#203b4e; }
.viewer-audio .chapter-item.is-active { background:#27465a; color:#fff; }
.viewer-audio .chapter-time { color:#a6c8df; }
.viewer-caption { position:absolute; left:0; right:0; top:0; padding:1rem 1.4rem 2rem; background:linear-gradient(#071016e8,transparent); pointer-events:none; display:grid; gap:.3rem; text-shadow:0 1px 3px #000; }
.viewer-caption strong { font-size:1.2rem; line-height:1.4; max-height:3.5em; overflow:hidden; }
.viewer-caption span { opacity:.85; font-size:.85rem; }
.viewer-tools { position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:.6rem; padding:1.5rem .8rem 1rem; flex-wrap:wrap; background:linear-gradient(transparent,#071016ed); transition:opacity .2s; }
.viewer-tools label { margin:0; display:flex; align-items:center; gap:.5rem; color:#e7edf3; }
.viewer-tools select { width:auto; }
.viewer-message { position:absolute; top:45%; left:50%; transform:translate(-50%,-50%); padding:1rem; border-radius:3px; background:#14222eea; max-width:min(80vw,580px); text-align:center; pointer-events:none; }
.viewer-message:empty { display:none; }
.controls-hidden .viewer-tools,.controls-hidden .viewer-caption { opacity:0; pointer-events:none; }
.controls-hidden:focus-within .viewer-tools { opacity:1; pointer-events:auto; }
.viewer-open { overflow:hidden; }
.slideshow-page .topbar,.slideshow-page>.footer { display:none; }
/* Upload and long-running admin jobs. */
.upload-progress { margin-top:1.5rem; padding:1.2rem; border:1px solid var(--line); border-radius:4px; background:#f7f9fb; }
.upload-status-line { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.65rem; }
.progress-label { margin:.75rem 0 .25rem; color:var(--muted); font-size:.85rem; }
progress { width:100%; height:14px; accent-color:var(--accent); }
.upload-summary { margin-top:1rem; padding:.8rem; border:1px solid var(--line); border-radius:3px; background:#fff; white-space:normal; }
.upload-summary-success { border-color:#a9cfbb; background:#edf8f1; color:var(--ok); }
.upload-summary-error { border-color:#d89696; background:#fff0ef; color:var(--danger); }
.upload-file-list { margin:1rem 0 0; padding:0; list-style:none; }
.upload-file-list li { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(130px,auto); gap:.75rem; padding:.65rem 0; border-bottom:1px solid var(--line); align-items:center; font-size:.86rem; }
.upload-file-name,.upload-file-state { overflow-wrap:anywhere; }
.upload-file-size { color:var(--muted); white-space:nowrap; }
.upload-file-state { font-weight:600; }
.upload-file-list li.is-running .upload-file-state { color:var(--accent); }
.upload-file-list li.is-done .upload-file-state { color:var(--ok); }
.upload-file-list li.is-error .upload-file-state { color:var(--danger); }
pre,.job-log { overflow:auto; background:#152632; color:#e0eaf1; padding:1rem; border-radius:3px; font-size:.83rem; }
.job-log { max-height:340px; white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:1050px) {
    .detail-layout { grid-template-columns:1fr; }
    .detail-layout aside .table { table-layout:auto; }
    .detail-layout aside .table th { width:32%; }
    .page-heading { align-items:flex-start; }
    .topbar { flex-wrap:wrap; }
}
@media(max-width:720px) {
    .container { width:calc(100% - 1.5rem); margin:1.2rem auto 2rem; }
    .panel { padding:1rem; }
    .topbar { position:relative; padding:.85rem 1rem; gap:.6rem; }
    .topbar nav { gap:.75rem; font-size:.82rem; }
    .user-pill,.session-label { border:0; padding-left:0; }
    .page-heading { display:block; }
    .page-heading>.actions { justify-content:flex-start; max-width:none; margin-top:1rem; }
    .grid { gap:1rem; }
    .gallery-grid,.media-grid { grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr)); }
    .form-row,.form-row-button { grid-template-columns:1fr; }
    .access-panel { margin:1.5rem auto; padding:1.5rem; }
    .detail-navigation { flex-wrap:wrap; }
    .section-heading { display:block; }
    .section-heading span { display:block; margin-top:.3rem; }
    .gallery-map { height:290px; }
    .audio-detail { grid-template-columns:1fr; }
    .audio-cover-player>img { max-height:45vh; }
    .chapter-list { max-height:310px; }
    .viewer-stage.is-audio { inset:88px 8px 120px; align-items:flex-start; }
    .viewer-audio { grid-template-columns:1fr; max-width:540px; }
    .viewer-audio .audio-cover-player>img { max-height:32dvh; }
    .viewer-audio .chapter-list { max-height:230px; }
    .viewer-tools { gap:.35rem; padding:.9rem .4rem .5rem; }
    .viewer-tools button,.viewer-tools a { min-height:34px; padding:.4rem .55rem; font-size:.78rem; }
    .viewer-tools label { font-size:.76rem; }
    .viewer-caption { padding:.65rem .9rem 1.6rem; }
    .viewer-caption strong { font-size:1rem; }
    .viewer-caption span { font-size:.76rem; }
    .upload-file-list li { grid-template-columns:1fr; gap:.2rem; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }