:root {
	--bg: #f4efe6;
	--bg-2: #efe8db;
	--surface: #fffdf9;
	--brown: #6f6450;
	--gold: #c39a2e;
	--gold-2: #b08820;
	--gold-soft: #e7d9a6;
	--ink: #241f18;
	--ink-2: #15110c;
	--muted: #7a7159;
	--line: #e3dccd;
	--doc: #f3ecdf;
	--radius: 6px;
	--shadow: 0 1px 2px rgba(60,50,30,.05);
	--shadow-lift: 0 22px 50px -22px rgba(60,48,28,.32), 0 2px 6px rgba(60,48,28,.06);
	--ease: .18s cubic-bezier(.4,0,.2,1);
	--maxw: 1440px;
	--pad: max(24px, calc((100% - var(--maxw)) / 2));
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0; min-height: 100%; display: flex; flex-direction: column;
	font-family: 'Montserrat', system-ui, sans-serif; color: var(--ink);
	background:
		radial-gradient(1100px 620px at 50% -10%, #fbf7ef 0%, rgba(251,247,239,0) 62%),
		radial-gradient(760px 640px at 96% 104%, rgba(195,154,46,.07) 0%, rgba(195,154,46,0) 58%),
		linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}
/* feines Papier-Raster für Tiefe (sehr zurückhaltend, maskiert) */
body::before {
	content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
	background-image: linear-gradient(rgba(111,100,80,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(111,100,80,.03) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
	mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
}
body > * { position: relative; z-index: 1; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

.cta {
	font-weight: 700; font-size: 14px; background: var(--ink); color: #f6f1e7;
	border: 0; border-radius: var(--radius); padding: 11px 20px;
	transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
	box-shadow: 0 6px 16px -8px rgba(36,31,24,.5);
}
.cta:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(36,31,24,.5); }
.cta:active { transform: translateY(0); }
.ghost {
	font-weight: 600; font-size: 14px; background: var(--surface); color: var(--brown);
	border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.ghost:hover { border-color: var(--brown); background: #fff; }
input {
	font-family: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line);
	border-radius: var(--radius); background: #fbf8f1; color: var(--ink); transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
input:focus { outline: none; border-color: var(--gold-2); background: #fff; box-shadow: 0 0 0 3px rgba(176,136,32,.32); }

/* Topbar */
.topbar {
	display: flex; align-items: center; gap: 24px; padding: 13px var(--pad);
	background: rgba(250,246,238,.86); backdrop-filter: blur(12px) saturate(1.1);
	border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; white-space: nowrap; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-app { font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: 10.5px; color: var(--brown); padding-left: 14px; border-left: 1px solid var(--line); }
.search { flex: 1; position: relative; display: flex; align-items: center; max-width: 560px; min-width: 0; }
.search-ico { position: absolute; left: 14px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.search input { width: 100%; padding-left: 42px; border-radius: 999px; background: #fbf8f1; }
.userbox { display: flex; align-items: center; gap: 16px; margin-left: auto; min-width: 0; }
.navlink { color: var(--brown); text-decoration: none; font-weight: 600; font-size: 14px; position: relative; padding: 3px 1px; white-space: nowrap; transition: color var(--ease); }
.navlink:hover { color: var(--ink); }
.navlink.active { color: var(--ink); }
.navlink.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold); border-radius: 2px; }
.account { position: relative; display: flex; }
.account-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: #fbf8f1; color: var(--brown); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; cursor: pointer; transition: border-color var(--ease), background var(--ease); }
.account-btn:hover { border-color: var(--gold-2); background: #fff; }
.account-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(40,30,12,.14); padding: 10px; z-index: 20; }
.account-menu[hidden] { display: none; }
.account-id { font-weight: 600; font-size: 14px; color: var(--ink); }
.account-mail { font-size: 12.5px; color: var(--muted); word-break: break-all; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.account-logout { width: 100%; text-align: left; padding: 7px 8px; border: 0; background: transparent; color: var(--brown); font-weight: 600; font-size: 14px; border-radius: 6px; cursor: pointer; }
.account-logout:hover { background: #fbf8f1; color: var(--ink); }

/* Toolbar */
.toolbar {
	display: flex; align-items: center; gap: 16px; padding: 20px var(--pad) 10px;
	flex-wrap: wrap; position: relative; z-index: 4;   /* über die Galerie (body>* z-index:1) heben -> Filter-Dropdowns nicht hinter Karten */
}
.count { font-size: 13px; letter-spacing: .02em; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.toolbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.fbtn {
	font-weight: 600; font-size: 13px; background: transparent; color: var(--brown);
	border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; transition: all var(--ease);
	white-space: nowrap;
}
.fbtn:hover { border-color: var(--brown); }
.fbtn.active { background: var(--brown); color: #fff; border-color: var(--brown); }
.fbtn.sort { color: var(--muted); }
.fbtn-caret { font-size: 10px; opacity: .7; margin-left: 1px; }

/* Einheitliche Control-Höhe/Radius in Toolbar und Bulk-Bar: sonst stehen Pills, Ghost-Buttons,
   CTA und Selects auf verschiedenen Höhen nebeneinander. Nur hier gescoped — .cta/.ghost werden
   projektweit (Login, Modal) genutzt und sollen dort ihre eigene Größe behalten. */
.toolbar .fbtn, .toolbar .cta, .toolbar .inline-sel,
.bulk-bar .ghost, .bulk-bar .cta, .bulk-field select, .bulk-field input {
	height: 36px; box-sizing: border-box; display: inline-flex; align-items: center;
	font-size: 13px; border-radius: 999px;
}
.toolbar .cta, .bulk-bar .cta { padding: 0 20px; }
.bulk-bar .ghost { padding: 0 16px; }
.bulk-field select, .bulk-field input { border-radius: 999px; padding: 0 14px; }

/* Inline-Filter: sichtbare Selects statt Dropdown, sobald der Bildschirm breit genug ist.
   Standard = versteckt (dann greift der Filter-Button darunter); ab 1080px zeigen wir die Selects und blenden den Button aus. */
.inline-filters { display: none; align-items: center; gap: 8px; flex-wrap: wrap; }
.inline-sel { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--brown); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 30px 6px 14px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23716551' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color var(--ease); max-width: 190px; }
.inline-sel:hover { border-color: var(--brown); }
.inline-sel:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(176,136,32,.32); }
.inline-sel.active { border-color: var(--brown); color: var(--ink); font-weight: 700; }
.inline-chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--brown); cursor: pointer; white-space: nowrap; }
.inline-chk input { accent-color: var(--gold); width: 15px; height: 15px; }
@media (min-width: 1080px) {
	.inline-filters { display: flex; }
	.filterdrop { display: none; }
}

/* Typ-Segmented-Control */
.segmented { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.seg-btn { font-family: inherit; font-weight: 600; font-size: 13px; color: var(--brown); background: transparent; border: 0; border-radius: 999px; padding: 6px 15px; white-space: nowrap; transition: background var(--ease), color var(--ease); }
.seg-btn:hover { color: var(--ink); }
.seg-btn.active { background: var(--brown); color: #fff; }

/* Filter-Panel-Dropdown */
.filterdrop { position: relative; }
/* Facetten (Person/Status/Typ/Kanal/Thema) nebeneinander statt als ein Turm — ein Einspalten-Dropdown
   lief bei 5 Sektionen aus dem Viewport. Auto-fill-Grid: mehr Sektionen -> mehr Spalten, nie höher als der Screen. */
.filterpanel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(720px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 18px; max-height: calc(100vh - 130px); overflow: auto; }
.fp-sec { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fp-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fp-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; }
.fp-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--brown); cursor: pointer; padding-top: 12px; border-top: 1px solid var(--line); }
.fp-check input { accent-color: var(--gold); width: 16px; height: 16px; }

/* aktive Filter-Chips */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px var(--pad) 4px; }
.afilter { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--gold-soft); border: 1px solid var(--gold-2); border-radius: 999px; padding: 4px 9px 4px 12px; transition: background var(--ease); }
.afilter:hover { background: #ecdcab; }
.afilter-x { font-size: 11px; opacity: .75; }

/* Gallery (Masonry via CSS columns) */
.gallery {
	flex: 1 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px; align-content: start; padding: 14px var(--pad) 56px;
}
.morewrap { display: flex; justify-content: center; padding: 0 var(--pad) 48px; }
.error-banner { display: flex; align-items: center; gap: 12px; margin: 0 var(--pad) 10px; padding: 9px 14px; border: 1px solid #e9c9c9; background: #fdf6f5; border-radius: var(--radius); font-size: 14px; color: #a33; }
.error-banner button { margin-left: auto; }
.queue-banner { display: flex; align-items: center; gap: 10px; margin: 0 var(--pad) 10px; padding: 9px 14px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); font-size: 14px; color: var(--brown); }
.cluster.cluster-done { opacity: .55; transition: opacity .3s ease; }
.cluster-done-msg { padding: 14px; font-weight: 600; color: var(--brown); }
.queue-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); animation: queuepulse 1.4s ease-in-out infinite; }
@keyframes queuepulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.media-vector { display: flex; align-items: center; justify-content: center; padding: 12px; }
.media-vector img { object-fit: contain !important; width: 100%; height: 100%; }
.err-bulk { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.card {
	background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
	cursor: pointer; box-shadow: var(--shadow); position: relative;
	transition: box-shadow var(--ease), border-color var(--ease);
}
.card:hover { box-shadow: var(--shadow-lift); border-color: #ddd4c2; }
/* Karierter Tile hinter Bildern: transparente/weisse Assets (Logos) sind auf einfarbigem Hell sonst unsichtbar.
   Bei Fotos (.cover) deckt das Bild den Tile komplett ab, der Schachbrett-Ton ist dann nicht sichtbar. */
.card .media { aspect-ratio: 3 / 4; overflow: hidden; position: relative; display: flex; flex-direction: column;
	background-color: #ebe4d5;
	background-image: linear-gradient(45deg, #d5c9ae 25%, transparent 25%), linear-gradient(-45deg, #d5c9ae 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d5c9ae 75%), linear-gradient(-45deg, transparent 75%, #d5c9ae 75%);
	background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; }
.card .media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card .media.cover img { object-fit: cover; object-position: center 20%; }
.card .doc-tile {
	flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 12px; background: radial-gradient(120% 120% at 50% 0%, #fbf8f1 0%, var(--doc) 100%); color: var(--brown);
}
.card .doc-ext { font-weight: 700; letter-spacing: .12em; font-size: 12px; padding: 4px 11px; border: 1px solid var(--brown); border-radius: var(--radius); }
.card .doc-glyph { width: 40px; height: 40px; opacity: .5; }
.card .doc-name { padding: 9px 13px; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--surface); border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.chip { font-size: 10.5px; font-weight: 500; letter-spacing: .02em; background: transparent; color: var(--brown); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; transition: all var(--ease); }
.chip:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.chip.more { border-style: dashed; color: var(--muted); cursor: default; }
.chip.more:hover { background: transparent; color: var(--muted); border-color: var(--line); }
.card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); }
.card-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-title.untitled { font-weight: 500; font-style: italic; color: var(--muted); }
.card-cap { font-size: 12px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.card-cap.lead { color: var(--ink); -webkit-line-clamp: 3; line-clamp: 3; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 1px; }
.card-foot .chips { margin-top: 0; }
.badge { position: absolute; top: 9px; left: 9px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius); z-index: 2; }
.badge.proc { background: #fff; color: var(--brown); box-shadow: var(--shadow); }
.badge.err { background: #fbe9e9; color: #a33; display: flex; gap: 6px; align-items: center; }
.badge .rerun { padding: 1px 7px; font-size: 10px; border-radius: 3px; border: 1px solid #d99; background: #fff; color: #a33; }
.card.state-processing { opacity: .8; }
.card.state-processing .doc-tile, .card.state-processing img { filter: grayscale(.3); }
.card.state-error { border-color: #d99; }

/* Skeleton/Shimmer */
.card.pending { min-height: 180px; }
.card.pending .doc-tile { background: linear-gradient(100deg, #f1ece0 30%, #faf6ec 50%, #f1ece0 70%); background-size: 200% 100%; animation: shimmer 1.2s infinite; color: var(--muted); }

/* Upload-Feedback */
.card.pending .up-media img { filter: grayscale(.25) brightness(.9); transition: filter .3s var(--ease); }
.card.pending .up-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 65%); background-size: 220% 100%; animation: shimmer 1.2s infinite; pointer-events: none; }
.up-badge { position: absolute; top: 8px; right: 8px; z-index: 3; min-width: 24px; height: 24px; padding: 0 5px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); backdrop-filter: blur(4px); box-shadow: var(--shadow); }
.up-badge svg { width: 14px; height: 14px; }
.up-spin { width: 13px; height: 13px; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: spin .6s linear infinite; }
.card.queued { opacity: .72; }
.card.queued .up-badge { background: rgba(255,255,255,.85); }
.card.queued .up-spin { animation: none; border-top-color: var(--muted); opacity: .55; }
.card.queued .up-media::after { animation-duration: 2.6s; }
.up-badge.done { background: var(--brown); color: #fff; animation: pop var(--ease); }
.up-badge.fail { background: #fbe9e9; color: #a33; animation: pop var(--ease); }
.card.state-dupe { opacity: .9; }
.card.state-dupe .doc-name { color: var(--muted); font-style: italic; }

/* Empty / Error */
.empty, .error { text-align: center; color: var(--muted); padding: 72px 24px; grid-column: 1 / -1; column-span: all; }
.empty h2 { color: var(--brown); font-weight: 600; font-size: 18px; margin: 0 0 6px; }
.empty p { margin: 0; max-width: 38ch; margin-left: auto; margin-right: auto; line-height: 1.5; }
.empty-ico { width: 44px; height: 44px; margin: 0 auto 16px; display: block; color: var(--gold); opacity: .6; }
.empty .cta, .empty .ghost { margin-top: 18px; }
.error { color: #a33; }

/* Drop-Overlay (drag-anywhere) */
.drop-overlay {
	position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
	background: rgba(207,175,62,.12); backdrop-filter: blur(2px); padding: 24px;
}
.drop-inner {
	border: 2px dashed var(--gold); border-radius: 12px; background: rgba(255,255,255,.92);
	padding: 60px 80px; text-align: center; color: var(--brown); font-weight: 600; font-size: 18px;
}
.drop-ico { font-size: 40px; margin-bottom: 10px; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(28,24,19,.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 32px; z-index: 60; animation: fade .2s ease both; }
.modal-inner { background: var(--surface); border-radius: 14px; max-width: 1120px; width: 100%; max-height: 90vh; overflow: hidden; position: relative; box-shadow: 0 30px 80px rgba(28,24,19,.45); animation: pop .24s cubic-bezier(.2,.7,.3,1) both; }
/* Vorheriges/Nächstes: Pfeile links/rechts neben dem zentrierten Modal (Flex-Geschwister der modal-inner) */
.modal-nav { flex: 0 0 auto; width: 44px; height: 44px; margin: 0 6px; border: 0; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(28,24,19,.35); transition: background var(--ease), transform var(--ease); }
.modal-nav:hover { background: #fff; transform: scale(1.06); }
.modal-nav.hidden { visibility: hidden; }
@media (max-width: 720px) {
	.modal-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 61; }
	.modal-nav.prev { left: 8px; } .modal-nav.next { right: 8px; }
	.modal-nav:hover { transform: translateY(-50%) scale(1.06); }
}
#modalBody { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); max-height: 90vh; }
.modal-media { background: radial-gradient(130% 130% at 50% 30%, #fbf8f1 0%, #ece3d3 100%); display: flex; align-items: center; justify-content: center; min-height: 320px; max-height: 90vh; overflow: auto; padding: 22px; }
.modal-media img { max-width: 100%; max-height: calc(90vh - 44px); display: block; object-fit: contain; border-radius: 4px; box-shadow: 0 10px 40px rgba(113,101,81,.20); }
.modal-media iframe { width: 100%; height: calc(90vh - 8px); border: 0; background: #fff; border-radius: 4px; }
.modal-media .empty { color: var(--muted); padding: 60px 24px; }
.modal-meta { padding: 28px 28px 32px; overflow: auto; max-height: 90vh; display: flex; flex-direction: column; }
.modal-meta h2 { margin: 0 0 14px; color: var(--brown); font-size: 18px; line-height: 1.35; word-break: break-word; }
.modal-meta p { color: var(--ink); line-height: 1.6; font-size: 14px; margin: 0 0 18px; }
.meta-label { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 4px 0 9px; }
.modal-meta .by { font-size: 12px; color: var(--brown); margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.audit-line { font-size: 11px; margin-top: 6px; }
.modal .close { position: absolute; top: 16px; right: 16px; font-size: 18px; line-height: 1; padding: 5px 12px; background: rgba(255,255,255,.92); z-index: 3; border-radius: 999px; box-shadow: var(--shadow); }

/* Footer */
.site-footer { margin-top: auto; padding: 32px var(--pad) 44px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 12px; letter-spacing: .03em; }
.footer-logo { height: 30px; width: auto; opacity: .45; }

/* Login */
.login-shell { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; }
.login-card {
	width: 430px; max-width: 94vw; padding: 46px 42px 34px; background: var(--surface);
	border: 1px solid var(--line); border-radius: var(--radius); position: relative; overflow: hidden; text-align: center;
	box-shadow: 0 30px 70px -28px rgba(60,48,28,.40), 0 2px 6px rgba(60,48,28,.06);
}
.login-card::before { content: ''; position: absolute; top: 0; left: 42px; right: 42px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold) 28%, var(--gold) 72%, transparent); }
.login-logo { height: 30px; width: auto; display: block; margin: 0 auto 18px; opacity: .92; }
.login-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--brown); }
.login-card h1 { margin: 3px 0 0; color: var(--ink); font-size: 33px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.login-card h1 + .rule { width: 34px; height: 2px; background: var(--gold); border-radius: 2px; margin: 8px auto 0; }
.login-card p.lead { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 14px auto 0; max-width: 30ch; }
.login-card form { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.login-card form input { text-align: left; }
.login-card form .cta { padding: 14px; font-size: 14.5px; }
.msg { background: var(--doc); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px; font-size: 13px; line-height: 1.45; color: var(--ink); margin-top: 14px; text-align: left; }

/* Admin */
.admin { margin: 24px 0 40px; padding: 0 var(--pad); }
.admin h1 { color: var(--brown); font-size: 22px; margin: 0 0 20px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; margin-bottom: 24px; box-shadow: var(--shadow); }
.panel h2 { color: var(--brown); font-size: 16px; margin: 0 0 16px; }
.field { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.field input { flex: 1; min-width: 200px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.data-table th { color: var(--muted); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.data-table tr:last-child td { border-bottom: 0; }
.namein { width: 100%; max-width: 220px; font-size: 14px; padding: 6px 9px; background: transparent; border-color: transparent; }
.namein:hover { border-color: var(--line); background: #fbf8f1; }
.namein.saved { border-color: #2f7d54; background: #eef6f0; }
.badge-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--doc); color: var(--brown); border: 1px solid var(--line); }
.badge-pill.admin { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.badge-pill.off { background: #fbe9e9; color: #a33; border-color: #e9c9c9; }

@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* Responsive */
@media (max-width: 980px) {
	.modal { padding: 16px; }
	.modal-inner { max-height: 92vh; }
	#modalBody { grid-template-columns: 1fr; max-height: 92vh; overflow: auto; }
	.modal-media { max-height: 52vh; min-height: 200px; }
	.modal-media img { max-height: calc(52vh - 44px); }
	.modal-media iframe { height: 60vh; }
	.modal-meta { max-height: none; }
}
@media (max-width: 720px) {
	:root { --pad: 16px; }
	html, body { overflow-x: hidden; }                 /* Safety-Net gegen horizontalen Overflow */
	.topbar { flex-wrap: wrap; gap: 10px 14px; padding: 11px var(--pad); }
	.brand-logo { height: 26px; }
	.brand-app { display: none; }                       /* App-Name spart Platz */
	.search { order: 2; flex-basis: 100%; max-width: none; }
	/* Nav umbricht in voller Zeile; Logout am Ende, immer sichtbar (kein Scroll, kein Clipping) */
	.userbox {
		order: 3; flex: 1 1 100%; flex-wrap: wrap; gap: 10px 16px; margin-left: 0; align-items: center;
	}
	.userbox .navlink { font-size: 15px; }
	.account { margin-left: auto; flex: 0 0 auto; }       /* Konto-Button ans Zeilenende, immer erreichbar */
	.toolbar { gap: 10px; }
	.filterdrop { position: static; }                              /* Panel an der Toolbar verankern */
	.filterpanel { left: 0; right: 0; width: auto; max-width: none; }  /* volle Inhaltsbreite -> nie aus dem Viewport */
	.toolbar .fbtn { flex: 0 0 auto; }
	.toolbar-right { width: 100%; justify-content: space-between; }
	.bulk-bar { position: static; top: auto; }            /* nicht unter die mehrzeilige Mobile-Topbar schieben */
	.bulk-field input { min-width: 0; flex: 1 1 auto; }   /* feste 140px-Mindestbreite als Overflow-Quelle entschärfen */
	.gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
	.data-table, .err-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
	.pers-actions { flex-wrap: nowrap; }
	.site-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Faces / Cluster Panel */
.clusters { display: flex; flex-direction: column; gap: 14px; }
.cluster { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.cluster-faces { display: flex; gap: 6px; flex-wrap: wrap; }
.facepick { position: relative; display: inline-block; }
.facepick img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius); display: block; }
.facepick input { position: absolute; top: 3px; left: 3px; }
.cluster-act { display: flex; gap: 8px; align-items: center; flex: 1 1 280px; flex-wrap: wrap; }
.cluster-act .cname { flex: 1 1 140px; min-width: 0; }
.cluster-act .cexist { flex: 0 1 200px; min-width: 0; font-family: inherit; font-size: 14px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }

/* Filter-Panel-Items (Person/Status) */
.pm-item { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; font-family: inherit; font-size: 13px; background: none; border: 0; padding: 7px 9px; border-radius: var(--radius); color: var(--ink); cursor: pointer; }
.pm-item:hover { background: var(--doc); }
.pm-item.sel { background: var(--gold-soft); color: var(--ink); font-weight: 600; }
.pm-empty { padding: 8px; }

/* Curation: status badges on cards */
.badge-status { position: absolute; top: 9px; right: 9px; font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 3px 8px; border-radius: var(--radius); z-index: 2; }
.badge-status.dnu { background: #fbe7e7; color: #9e2b2b; border: 1px solid #ecc4c4; }
.badge-status.approved { background: #e9f1e2; color: #46683a; border: 1px solid #cce0bf; }
.badge-status.archived { background: #ecebe8; color: #6b6259; border: 1px solid #d4cfc8; }
.card.donotuse { border-color: #e9c9c9; opacity: .72; }
.card.donotuse:hover { border-color: #d99; }
.card.donotuse .doc-tile { background: radial-gradient(120% 120% at 50% 0%, #fdf5f5 0%, #f7eded 100%); }

/* Curation: edit form in modal */
.filename-orig { font-size: 12px; margin-bottom: 14px; }
.modal-meta form.curate { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.modal-meta form.curate label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.modal-meta form.curate input,
.modal-meta form.curate textarea,
.modal-meta form.curate select { font-family: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); transition: border-color var(--ease), box-shadow var(--ease); }
.modal-meta form.curate input:focus,
.modal-meta form.curate textarea:focus,
.modal-meta form.curate select:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(176,136,32,.32); }
.modal-meta form.curate textarea { resize: vertical; min-height: 68px; }
.modal-meta form.curate .cta { align-self: flex-start; margin-top: 4px; }
.curate-msg { font-size: 13px; padding-top: 2px; }
.curate-topics { display: flex; flex-direction: column; gap: 8px; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.modal-meta form.curate .topic-chip { flex-direction: row; gap: 5px; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; cursor: pointer; user-select: none; transition: border-color var(--ease), background var(--ease); }
.topic-chip { display: inline-flex; align-items: center; }
.topic-chip:has(input:checked) { border-color: var(--gold-2); background: rgba(176,136,32,.10); }
.topic-chip input { accent-color: var(--gold-2); margin: 0; }

/* do_not_use warning banner in modal */
.warn { background: #fbe9e9; border: 1px solid #e9c9c9; border-radius: var(--radius); color: #a33; font-size: 13px; font-weight: 600; padding: 8px 12px; margin-bottom: 12px; }

/* Bulk-Leiste */
/* Kontextuelle Auswahl-Leiste: dunkel abgesetzt von der hellen Filterzeile, damit klar ist, dass man
   eine Auswahl BEARBEITET und nicht filtert (die Facetten heissen in beiden Zeilen gleich). */
.bulk-bar {
	display: flex; flex-direction: column; gap: 12px;
	padding: 12px var(--pad); background: var(--ink); color: #f3ecdd;
	position: sticky; top: 57px; z-index: 3;
}
.selbar-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.selbar-count { font-weight: 700; font-size: 15px; color: #fff; min-width: 92px; }
.selbar-toggle, .selbar-act { height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 0 16px; cursor: pointer; transition: background var(--ease), border-color var(--ease); }
.selbar-toggle { background: rgba(255,255,255,.12); color: #f3ecdd; border: 1px solid rgba(255,255,255,.22); }
.selbar-toggle:hover, .selbar-toggle[aria-expanded="true"] { background: rgba(255,255,255,.22); }
.selbar-act { background: transparent; color: #f3ecdd; border: 1px solid rgba(255,255,255,.28); }
.selbar-act:hover { background: rgba(255,255,255,.1); }
.selbar-act.danger { color: #f2b8b0; border-color: rgba(242,120,110,.5); }
.selbar-act.danger:hover { background: rgba(242,120,110,.14); }
.selbar-spacer { margin-left: auto; }
.selbar-edit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.15); }
.selbar-edit.hidden { display: none; }
.selbar-rule { width: 1px; height: 24px; background: rgba(255,255,255,.2); margin: 0 4px; }
.selbar-msg { font-size: 12px; color: rgba(243,236,221,.8); }
.selbar-apply { height: 34px; background: var(--gold-2); color: var(--ink); border: 0; border-radius: 999px; padding: 0 18px; font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.selbar-apply:hover { filter: brightness(1.06); }
.bulk-field { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: rgba(243,236,221,.75); letter-spacing: .04em; text-transform: uppercase; }
.selbar-edit select, .selbar-edit input {
	height: 34px; box-sizing: border-box; font-family: inherit; font-size: 13px; padding: 0 12px;
	border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: #fffdf9; color: var(--ink);
}
.selbar-edit input { min-width: 140px; }
.bulk-bar.readonly #bulkEditToggle, .bulk-bar.readonly #bulkEdit,
.bulk-bar.readonly #bulkRerun, .bulk-bar.readonly #bulkDelete { display: none; }   /* lesen-Rolle: nur Download + Auswahl aufheben */

/* Sammlung-Hinzufügen im Modal */
.modal-coll { margin-top: 14px; }
.coll-add-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.coll-add-sel { font-family: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); flex: 1; min-width: 140px; max-width: 220px; }
.coll-add-sel:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(176,136,32,.32); }
.coll-add-msg { font-size: 12px; }

/* Bulk-Leiste Sammlung-Separator */
.bulk-sep { display: inline-block; width: 1px; height: 22px; background: var(--line); margin: 0 2px; align-self: center; }
.bulk-coll-msg { font-size: 12px; }

/* Karten-Auswahl-Checkbox — immer sichtbar + größerer Trefferbereich (Mobile ohne Hover),
   weißer Ring für Kontrast über dunklen Thumbnails */
.card-sel {
	position: absolute; top: 8px; left: 8px; z-index: 3; width: 22px; height: 22px;
	cursor: pointer; accent-color: var(--gold); border-radius: 4px;
	opacity: 0; transition: opacity var(--ease);
	box-shadow: 0 0 0 3px rgba(255,255,255,.7);
}
/* Checkbox erst zeigen, wenn sie gebraucht wird: beim Hover, wenn die Karte gewählt ist,
   oder sobald überhaupt etwas ausgewählt ist (Auswahlmodus) — nicht dauerhaft im Grid. */
.card:hover .card-sel, .card.selected .card-sel, .gallery.selecting .card-sel { opacity: 1; }
.card { user-select: none; -webkit-user-select: none; }   /* saubere Shift-Bereichsauswahl ohne Text-Markierung */
.card.selected { outline: 2px solid var(--gold); outline-offset: -2px; }

/* Modal-Gesichter */
.modal-faces { margin-top: 14px; }
.mf-row { display: flex; gap: 10px; flex-wrap: wrap; }
.mf { position: relative; text-align: center; font-size: 12px; }
.mf img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius); display: block; }
.mf-name { display: block; margin-top: 3px; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; line-height: 16px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); }
.modal-delete { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }

/* Personen-Bereich */
.personen { margin: 24px 0 40px; padding: 0 var(--pad); display: flex; flex-direction: column; gap: 22px; }
.personen .panel h2 { color: var(--brown); font-size: 16px; margin: 0 0 16px; }
.personen .gallery { padding-left: 0; padding-right: 0; }
.pers-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-danger { color: #a33; border-color: #e9c9c9; }
.btn-danger:hover { color: #fff; background: #b3392f; border-color: #b3392f; }
.pers-link { color: var(--brown); font-weight: 600; text-decoration: none; }
.pers-link:hover { color: var(--ink); text-decoration: underline; }
.pers-detail-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pers-detail-head h2 { color: var(--brown); font-size: 18px; margin: 0; flex: 1; }
.pers-arch-toggle { font-size: 13px; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.pers-rename-inp { font-family: inherit; font-size: 14px; padding: 6px 9px; border: 1px solid var(--gold); border-radius: var(--radius); color: var(--ink); background: var(--bg); }

/* Personen Preview-Modal (compact) */
.modal-body-pers { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); max-height: 90vh; }

/* Merge-Modal */
.pers-merge-inner { max-width: 520px; padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; }
.pers-merge-inner h2 { color: var(--brown); font-size: 17px; margin: 0; }
.pers-merge-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto; }
.merge-pick { text-align: left; width: 100%; justify-content: flex-start; }

@media (max-width: 720px) {
	.personen { padding: 0 16px; }
	.modal-body-pers { grid-template-columns: 1fr; max-height: 92vh; overflow: auto; }
}

/* Sammlungen-Bereich */
.sammlungen { margin: 24px 0 40px; padding: 0 var(--pad); display: flex; flex-direction: column; gap: 22px; }
.sammlungen h2, .sammlungen .panel h2, .coll-h2 { color: var(--brown); font-size: 16px; margin: 0 0 16px; }
.coll-create-form { margin-bottom: 18px; }
.coll-create-form input { min-width: 0; }
/* Sammlungskarten wie die Galerie: randloses Grid, Karte mit Bild-Cover statt reiner Textzeile. */
.coll-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 4px; }
.coll-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; box-shadow: var(--shadow); transition: box-shadow var(--ease), border-color var(--ease); }
.coll-card:hover { box-shadow: var(--shadow-lift); border-color: #ddd4c2; }
.coll-cover { aspect-ratio: 4 / 3; display: grid; gap: 2px; background: #e9e1d2; }
.coll-cover.n1 { grid-template-columns: 1fr; }
.coll-cover.n2 { grid-template-columns: 1fr 1fr; }
.coll-cover.n3, .coll-cover.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.coll-cover.n3 .cc-cell:first-child { grid-row: span 2; }
.cc-cell { background-size: cover; background-position: center; background-color: #efe9de; }
.coll-cover-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.coll-cover-empty svg { width: 42px; height: 42px; opacity: .6; }
.coll-card-body { padding: 12px 14px 14px; }
.coll-card-name { font-weight: 600; font-size: 15px; color: var(--brown); margin-bottom: 4px; }
.coll-card-meta { font-size: 12px; }
.coll-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; margin-bottom: 12px; color: var(--muted); }
.coll-crumb a { color: var(--brown); font-weight: 600; text-decoration: none; }
.coll-crumb a:hover { color: var(--ink); text-decoration: underline; }
.coll-crumb .crumb-sep { color: var(--line); }
.coll-crumb .crumb-cur { color: var(--ink); font-weight: 700; }
.coll-children:not(:empty) { margin-bottom: 20px; }
.coll-subadd { margin-top: 10px; }
.coll-subadd .coll-create-form { margin-top: 10px; }
.coll-detail-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
/* Dezentes ⋯-Aktionsmenü statt Werkzeug-Reihe im Header */
.coll-menu-wrap { position: relative; }
.coll-menu-btn { font-size: 18px; line-height: 1; padding: 5px 13px; letter-spacing: .06em; }
.coll-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(40,30,12,.16); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.coll-menu[hidden] { display: none; }
.coll-menu-item { text-align: left; width: 100%; padding: 8px 10px; border: 0; background: transparent; color: var(--ink); font-weight: 600; font-size: 14px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.coll-menu-item:hover { background: var(--doc); }
.coll-menu-item.danger { color: #a33; }
.coll-menu-item.danger:hover { background: #fbe9e9; }
.coll-menu-move { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.coll-menu-move select { text-transform: none; letter-spacing: normal; font-weight: 500; max-width: none; }
.coll-menu-sep { height: 1px; background: var(--line); margin: 4px 2px; }
.coll-detail-head > div { display: flex; align-items: center; gap: 8px; }
.coll-detail-head #collDetailTitle { flex: 1; min-width: 0; }        /* Titel wächst → schiebt die Aktionen nach rechts */
.coll-detail-head #collDetailActions { flex: 0 0 auto; justify-content: flex-end; }
.coll-title-text { font-weight: 700; font-size: 18px; color: var(--brown); }
.coll-delete-btn { color: #a33; border-color: #e9c9c9; font-size: 13px; padding: 6px 12px; }
.coll-delete-btn:hover { color: #fff; background: #b3392f; border-color: #b3392f; }
.coll-desc { margin: 0 0 6px; }
.coll-upload-status { margin: 0 0 8px; font-size: 13px; }
.upfail-box { margin: 0 0 12px; border: 1px solid #e9c9c9; background: #fdf6f5; border-radius: var(--radius); padding: 10px 12px; max-height: 220px; overflow-y: auto; }
.upfail-head { font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #a33; margin-bottom: 6px; }
.upfail-row { display: flex; gap: 10px; justify-content: space-between; font-size: 13px; padding: 3px 0; border-top: 1px solid #f0e0e0; }
.upfail-row:first-of-type { border-top: 0; }
.upfail-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upfail-why { flex: 0 0 auto; color: #a33; }
.coll-inherit-head { grid-column: 1 / -1; margin: 18px 0 2px; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--brown); }
.coll-inherit-head .muted { font-weight: 600; letter-spacing: 0; text-transform: none; margin-left: 6px; }
.coll-grid .card.inherited { opacity: .92; }
.coll-grid .card.inherited:hover { opacity: 1; }
.coll-grid { padding: 6px 0 0; }
/* Dateiname bleibt auf der Kachel: beim Abgleich mit einem Quellordner ist er die einzige Handhabe. */
.coll-grid .card-body { padding: 7px 9px 9px; }
.coll-grid .card-title { font-size: 12px; }
/* Detail-Raster nutzt dieselben 3:4-Karten wie die Bibliothek (vorher 1:1 — wirkte wie eine andere Ansicht). */
.coll-remove-btn { position: absolute; bottom: 7px; right: 7px; font-size: 11px; padding: 3px 9px; opacity: 0; transition: opacity var(--ease); z-index: 3; background: rgba(255,255,255,.9); }
.card:hover .coll-remove-btn { opacity: 1; }

@media (max-width: 720px) {
	.sammlungen { padding: 0 16px; }
	.coll-detail-head { padding: 0; }
	.coll-desc { padding: 0; }
}

/* Admin Cockpit: Stat-Kacheln */
.stat-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px;
}
.stat-tile {
	background: var(--doc); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.stat-tile .stat-val { font-size: 26px; font-weight: 700; color: var(--brown); line-height: 1; }
.stat-tile .stat-lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stat-tile.accent { border-color: #cce0bf; background: #eef4e8; }
.stat-tile.accent .stat-val { color: #46683a; }
.stat-tile.err .stat-val { color: #9e2b2b; }
.stat-tile.err { border-color: #ecc4c4; background: #fdf6f6; }

/* Health dot */
.health-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.health-dot.ok { background: #5c9e6b; }
.health-dot.fail { background: #a33; }

/* Admin Cockpit: entry links */
.cockpit-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.cockpit-links a { font-size: 13px; font-weight: 600; color: var(--brown); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.cockpit-links a:hover { color: var(--ink); border-color: var(--brown); }

/* Admin Cockpit: Fehler-Tabelle */
.err-table { width: 100%; border-collapse: collapse; }
.err-table th, .err-table td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.err-table th { color: var(--muted); font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.err-table tr:last-child td { border-bottom: 0; }
.err-table .err-name { font-weight: 600; color: var(--ink); max-width: 200px; word-break: break-all; }
.err-table .err-msg { color: #a33; max-width: 320px; word-break: break-word; }
.err-empty { color: var(--muted); font-size: 14px; padding: 18px 0 6px; }

/* Bunny-Video: Play-Overlay auf der Karte, 16:9-Player im geteilten Modal */
.card .media.video .play-overlay { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(13,34,49,.55); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.card .media.video .play-overlay::after { content: ''; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.video-embed { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.video-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; max-height: calc(90vh - 90px); border: 0; border-radius: 4px; background: #000; }
.video-embed .empty { color: var(--muted); padding: 60px 24px; }
.video-dl { align-self: center; }