/* Shared styles for all pages */

:root {
  --text: #1d1d1f;
  --muted: #6b6b70;
  --line: #d9d9de;
  --bg: #ffffff;
  --accent: #7a2e1f;
  --ok: #2a7a2a;
  --fail: #b03030;
  --notice-bg: #eef4ea;
  --error-bg: #fbecec;
  --panel: #f3f1ec;      /* background behind images */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }
body { font: 16px/1.5 system-ui, sans-serif; color: var(--text); background: var(--bg); margin: 0; }
main { max-width: 60rem; margin: 2rem auto; padding: 0 1rem; }
a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }

/* Header: logo, names, user badge with menu */
header.site { display: flex; align-items: center; gap: 1rem; padding: .6rem 1.5rem;
  border-bottom: 1px solid var(--line); background: #fff; }
header.site .logo img { display: block; height: 3.2rem; }
header.site .names { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; }
header.site .site-name { color: var(--muted); font-size: .8rem; letter-spacing: .02em; }
header.site .collection { font: 1.3rem var(--serif); color: var(--text); text-decoration: none; }
/* "Gehe zu" in the header: a small search field before "+ Neu" and the badge */
header.site .goto input { width: 11rem; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 1rem;
  font: inherit; font-size: .9rem; }
header.site .goto input:focus { border-color: var(--accent); outline: none; }
@media (max-width: 40rem) { header.site .goto input { width: 7rem; } }
.goto-results li { margin-bottom: .3rem; }
.goto-results .muted { color: var(--muted); }

/* the collection switcher: a small ▾ beside the name, its menu opens below it, aligned left */
header.site .collection-line { display: flex; align-items: center; gap: .4rem; }
.switcher summary { padding: 0 .35rem; border: 1px solid transparent; border-radius: 4px; color: var(--muted); }
.switcher[open] summary, .switcher summary:hover { border-color: var(--line); color: var(--text); }
.dropdown.switcher .menu { left: 0; right: auto; }

/* The menus in the header ("+ Neu", the badge): <details> does the opening */
.dropdown { position: relative; }
.dropdown summary { list-style: none; cursor: pointer; }
.dropdown summary::-webkit-details-marker { display: none; }
/* "+ Neu": quiet, it is used rarely */
.newmenu summary { padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 1rem;
  font-size: .85rem; color: var(--muted); }
.newmenu[open] summary, .newmenu summary:hover { border-color: var(--accent); color: var(--text); }
.newmenu .menu { min-width: 11rem; }
/* The badge: a round button with the initials */
.usermenu .badge { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem;
  border-radius: 50%; background: var(--panel); border: 1px solid var(--line); font-size: .85rem;
  font-weight: 600; color: var(--text); }
.usermenu[open] .badge, .usermenu summary:hover .badge { border-color: var(--accent); }
.dropdown .menu { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 10; min-width: 14rem;
  padding: .4rem 0; background: #fff; border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.usermenu .who { margin: 0; padding: .4rem 1rem .6rem; border-bottom: 1px solid var(--line);
  font-size: .85rem; color: var(--muted); }
.usermenu .who strong { color: var(--text); }
.dropdown .menu a, .dropdown .menu button { display: block; width: 100%; padding: .4rem 1rem; text-align: left;
  color: var(--text); text-decoration: none; font-size: .95rem; }
.dropdown .menu a:hover, .dropdown .menu button:hover { background: var(--panel); }
.dropdown form { margin: 0; }

/* Admin area: its own navigation under the header */
nav.admin { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.25rem; padding: .5rem 1.5rem;
  background: var(--panel); border-bottom: 1px solid var(--line); font-size: .9rem; }
nav.admin .label { color: var(--muted); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
nav.admin a { color: var(--text); text-decoration: none; }
nav.admin a.current { font-weight: 600; border-bottom: 2px solid var(--accent); }
nav.admin .back { margin-left: auto; color: var(--accent); }

/* Footer */
footer.site { margin-top: 4rem; padding: 1.25rem 1.5rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .85rem; }

/* Einstellungen */
.settings { margin-bottom: 2.5rem; }
.settings h2 { font-size: 1.1rem; margin: 0 0 .75rem; }

/* Messages */
.notice, .error { padding: .5rem .75rem; border-radius: 4px; }
.notice { background: var(--notice-bg); }
.error { background: var(--error-bg); color: var(--fail); }
form.locked { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .5rem .75rem;
  border-radius: 4px; background: var(--error-bg); margin: 0 0 1rem; }
.hint { color: var(--muted); font-size: .9rem; }
/* Hidden on screen but still there for the browser and screen readers */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.ok { color: var(--ok); }
.fail { color: var(--fail); }

/* Forms */
.form { max-width: 28rem; }
.form label { display: block; margin-bottom: .9rem; }
/* A password field with its "anzeigen" button inside, on the right (the script in page_end()) */
.password { position: relative; display: block; }
.form .password input { padding-right: 5.5rem; }
.password button { position: absolute; right: .3rem; bottom: .3rem; padding: .15rem .45rem;
  font: inherit; font-size: .85rem; color: var(--muted); background: none; border: 0; cursor: pointer; }
.password button:hover { color: inherit; text-decoration: underline; }
.form input:not([type=checkbox]):not([type=radio]), .form select { display: block; width: 100%; margin-top: .2rem;
  padding: .4rem .5rem; font: inherit; border: 1px solid var(--line); border-radius: 4px; }
.form label.check { display: flex; gap: .5rem; align-items: baseline; }
.form fieldset { border: 1px solid var(--line); border-radius: 4px; margin: 0 0 1rem; padding: .75rem 1rem .25rem; }
button, .button { font: inherit; padding: .4rem 1rem; border: 1px solid var(--accent); border-radius: 4px;
  background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
button:not(.link):disabled { opacity: .45; cursor: default; }
button.link { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; }
.dropdown .menu button.link { text-decoration: none; border-radius: 0; font: inherit; cursor: pointer; }

/* Tables */
table { border-collapse: collapse; }
td, th { padding: .3rem 1rem .3rem 0; text-align: left; vertical-align: top; }
table.list { width: 100%; }
table.list th { border-bottom: 1px solid var(--line); }
table.list td { border-bottom: 1px solid var(--line); }
tr.inactive td { color: var(--muted); }
@media (max-width: 40rem) { table.list { display: block; overflow-x: auto; } }

/* Admin page "Listen": the choice of collection, one table per list, small row buttons */
.choice { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.choice a { color: var(--text); text-decoration: none; }
.choice a.current { font-weight: 600; border-bottom: 2px solid var(--accent); }
.list-admin { margin: 2rem 0 3rem; max-width: 52rem; }
.list-admin th[colspan] { padding-top: 1rem; color: var(--muted); font-weight: 600; }
.list-admin td.number { white-space: nowrap; }
.list-admin td.row-buttons { white-space: nowrap; text-align: right; }
form.inline { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
form.inline input:not([type=checkbox]) { font: inherit; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 4px; }
form.add { margin-top: 1rem; }
button.small, .button.small { padding: .1rem .5rem; font-size: .85rem; }
button.secondary, .button.secondary { background: none; color: var(--accent); }
form.rename { margin: 1rem 0; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
form.rename p { margin: 0 0 .6rem; }
form.rename input { font: inherit; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 4px; }
ul.missing li { margin-bottom: .3rem; }

/* A long facet list (more than FACET_SEARCH_FROM values): a search field above, the list scrolls */
.facet .facet-search { width: 100%; margin-bottom: .4rem; }
.facet ul.long { max-height: 16rem; overflow-y: auto; }
/* The Ort tree (places within places): ▸ in the left margin, sub-places indented */
.facet .place-tree-search { width: 100%; margin-bottom: .4rem; }
.facet ul.place-tree { max-height: 24rem; overflow-y: auto; padding-left: 1.1rem; }
.place-tree ul { margin: 0; padding-left: 1rem; }
.place-tree li { position: relative; }
.place-tree .toggle { position: absolute; left: -1.1rem; top: .1rem; width: 1.1rem; padding: 0; border: none;
  background: none; color: var(--muted); cursor: pointer; transition: transform .1s; }
.place-tree .toggle[aria-expanded="true"] { transform: rotate(90deg); }
.place-tree li.self .name { font-style: italic; }

/* Start page (/): the choice of collection, one box each */
.collections { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.collection-box { display: flex; flex-direction: column; gap: .25rem; padding: 1.25rem 1.5rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text);
  text-decoration: none; }
.collection-box:hover { border-color: var(--accent); }
.collection-box .name { font: 1.3rem var(--serif); }
.collection-box .count { color: var(--muted); font-size: .9rem; }

/* List page (/ak), taken from the approved sketch (sketches/sketch.css) */
main.list { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; max-width: 90rem;
  margin: 1.5rem auto; padding: 0 1.5rem; }
/* a message ("… wurde gelöscht") is a grid item too: across both columns, not in the filter column */
main.list > .notice { grid-column: 1 / -1; margin: 0 0 -1.5rem; }
.filters form { margin: 0; }
.filters input[type=search] { width: 100%; padding: .5rem .6rem; font: inherit; border: 1px solid var(--line);
  border-radius: 3px; background: #fff; }
.facet { border-bottom: 1px solid var(--line); padding: .6rem 0; }
.facet summary { cursor: pointer; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.facet ul { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .9rem; }
.facet li { padding: .1rem 0; }
.facet label { cursor: pointer; }
.facet input[type=checkbox] { accent-color: var(--accent); }
.facet input[type=search] { margin-top: .4rem; }
.facet .count, .muted { color: var(--muted); font-size: .8rem; }

.resultbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: .5rem 1.5rem; margin-bottom: 1rem; }
.resultbar p { margin: 0; }
.resultbar .reset { margin-left: .75rem; font-size: .85rem; }
.resultbar .sort { font-size: .9rem; word-spacing: .3rem; }
.resultbar .view-switch { margin-right: 1.5rem; }
/* The list as a map (karte=1, httpdocs/map/list.js): the number in each circle */
.map-edit { float: right; margin: .5rem 0 0 1rem; font-size: .9rem; }
.list-map { height: 70vh; min-height: 24rem; border: 1px solid var(--line); border-radius: 4px; }
/* Leaflet gives its panes and controls z-index 400–1000; isolated, they only count inside the map,
   so the image viewer (z-index 100) and the menus lie above every map */
.list-map, .record-map, .map { isolation: isolate; }
.leaflet-tooltip.map-count { background: none; border: none; box-shadow: none; padding: 0;
  color: #fff; font-weight: 700; font-size: .8rem; text-shadow: 0 0 3px #5a0f0f, 0 0 3px #5a0f0f; }
.leaflet-tooltip.map-count::before { display: none; }
.chip { display: inline-block; margin-left: .75rem; padding: .1rem .6rem; border-radius: 1rem;
  background: var(--panel); font-size: .85rem; }
.chip a { text-decoration: none; }

.results .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 2rem 1.5rem; }
.card { display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
.card .thumb { position: relative; display: flex; align-items: center; justify-content: center; height: 12rem;
  background: var(--panel); padding: .75rem; }
.card .thumb img { max-width: 100%; max-height: 100%; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.card:hover .thumb { background: #ebe8e1; }
.card .title { margin-top: .5rem; font-family: var(--serif); line-height: 1.3; }
.card .meta { color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.noimg { color: var(--muted); font-size: .85rem; }
/* "×3": the number of copies of a card (the list shows them as one) */
.copies { position: absolute; top: .4rem; right: .4rem; padding: 0 .45rem; border-radius: 1rem;
  background: rgba(255,255,255,.92); color: var(--text); font-size: .8rem; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.untitled { color: var(--muted); font-style: italic; }
.pages { margin-top: 2.5rem; text-align: center; word-spacing: .5rem; }
.pages a { text-decoration: none; }

/* Schlossansicht compass: 3 × 3 directions, then the special views */
.compass { margin-top: .5rem; font-size: .75rem; }
.compass .grid { display: grid; grid-template-columns: repeat(3, 2.4rem); gap: 3px; }
.compass .special { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; max-width: 7.6rem; }
.compass a, .compass span { display: flex; align-items: center; justify-content: center; min-height: 2.4rem;
  padding: .2rem .3rem; border: 1px solid var(--line); background: #fff; color: var(--text); text-decoration: none; }
.compass .special a, .compass .special span { flex: 1 1 45%; min-height: auto; }
.compass a:hover { border-color: var(--accent); }
.compass .empty { color: #c9c6bf; }
.compass .on { background: var(--accent); border-color: var(--accent); color: #fff; }
.compass .center { border: none; background: none; color: var(--muted); }

/* Detail page (/ak/<ID>), taken from the approved sketch (sketches/sketch.css) */
main.detail { max-width: 80rem; margin: 1.5rem auto; padding: 0 1.5rem; }
.crumbs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .9rem; margin-bottom: 1.5rem; }
.crumbs a { text-decoration: none; }
.detail .layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
/* the images stay in view while the fields scroll */
.images { position: sticky; top: 1rem; }
.images figure { margin: 0; background: var(--panel); padding: 1.5rem; text-align: center; }
.images figure img { max-width: 100%; max-height: 75vh; box-shadow: 0 2px 8px rgba(0,0,0,.15); vertical-align: middle; }
.images figure .noimg { display: block; padding: 6rem 0; }
.images figcaption { color: var(--muted); font-size: .8rem; margin-top: .75rem; }
.thumbs { display: flex; gap: .75rem; margin-top: .75rem; }
.thumbs img { display: block; height: 5rem; border: 1px solid var(--line); background: #fff; padding: 3px; }
.thumbs a.current img { border-color: var(--accent); }
/* Other copies / editions under the images */
.related { margin-top: 1.5rem; }
.related h3, .fields h2 { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  font-weight: 600; margin: 0 0 .5rem; }
.related .row { display: flex; flex-wrap: wrap; gap: .75rem; }
.related a { display: flex; flex-direction: column; align-items: center; color: var(--text);
  font-size: .75rem; text-decoration: none; }
.related img, .related .noimg { height: 4.5rem; border: 1px solid var(--line); background: #fff; padding: 3px; }
.related .noimg { display: flex; align-items: center; padding: 0 .5rem; font-size: .7rem; }
.related a:hover img { border-color: var(--accent); }
.related .relcard { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.related a.thumb { cursor: zoom-in; }
.related a.sig { color: var(--accent); }
.related a.sig:hover { text-decoration: underline; }
.kicker { color: var(--muted); font-size: .85rem; margin: 0; letter-spacing: .03em; }
.fields h1 { font: 1.9rem/1.25 var(--serif); margin: .25rem 0 1rem; }
.fields h2 { margin-top: 2rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
.fields h2 .hint { text-transform: none; letter-spacing: 0; font-weight: normal; margin-left: .5rem; font-size: .75rem; }
.fields dl { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .5rem 1rem; margin: 0; }
.fields dt { color: var(--muted); font-size: .9rem; }
.fields dd { margin: 0; overflow-wrap: anywhere; }
/* The card's places under the field Ort (D + F): a small map and a line per place, in the value column */
.fields dd.record-places { grid-column: 2; }
.record-map { height: 300px; border: 1px solid var(--line); border-radius: 4px; }
.record-places ul { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .9rem; }
.record-places li { padding: .1rem 0; }

.fields .edit { margin: 0 0 .5rem; }
/* Deleting: the link in the form, the confirmation page, a deleted record's banner */
.editform .actions .delete { margin-left: auto; color: var(--fail); }
button.danger { background: var(--fail); border-color: var(--fail); }
.delete-what { display: flex; gap: 1rem; align-items: center; margin: 1rem 0; }
.delete-what img { height: 7rem; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.deleted { margin: .5rem 0 1rem; padding: .6rem .8rem; background: var(--error-bg); border-radius: 4px; }
.deleted p { margin: 0 0 .5rem; }
.deleted form { margin: 0; }
.deleted-link { margin-top: 1.5rem; font-size: .85rem; }

/* Moving a record (admins): the link on the detail page, the page */
.move-link { margin-top: 1.5rem; font-size: .85rem; }
.move .hidden-fields { margin: 0 0 1rem; }
.move .hidden-fields dt { color: var(--muted); font-size: .85rem; }
.move .hidden-fields dd { margin: 0 0 .4rem; }
.row-actions { white-space: nowrap; }
/* The "Bilder" page */
.picture-list { list-style: none; margin: 1rem 0 2rem; padding: 0; }
.picture-list li { display: flex; align-items: center; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.picture-list img { display: block; height: 5rem; border: 1px solid var(--line); background: #fff; padding: 3px; }
.picture-list .noimg { display: inline-block; width: 5rem; }
.picture-list .name { flex: 1; font-size: .9rem; overflow-wrap: anywhere; }
.picture-list .missing { color: var(--fail); margin-left: .4rem; }
.picture-list label.link { color: var(--accent); text-decoration: underline; cursor: pointer; }
.pictures-link { margin-left: 1rem; font-size: .9rem; }
.dropzone { display: block; max-width: 34rem; padding: 1.5rem; border: 2px dashed var(--line); border-radius: 6px;
  text-align: center; color: var(--muted); cursor: pointer; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); color: var(--text); }
.dropzone.busy { opacity: .5; }
.dropzone input { display: block; margin: 0 auto .5rem; }
.upload .upload-button[hidden] { display: none; }
.upload .hint { max-width: 34rem; }
.row-actions form { display: inline; margin-left: .9rem; }
.reserved-line { margin: 0 0 1rem; padding: .45rem .75rem; background: var(--panel); border-radius: 4px; font-size: .9rem; }
.actions { display: flex; gap: 1.25rem; align-items: center; }

/* The "Dubletten suchen" page (/ak/<ID>/dubletten) */
.group-cards { list-style: none; margin: 0 0 1rem; padding: 0; }
/* picture and text side by side, the buttons (or a note) on a line of their own below them */
.group-cards li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .4rem 1rem;
  padding: .5rem 0; border-bottom: 1px solid var(--line); }
.group-cards .thumb img, .group-cards .noimg { display: block; height: 4.5rem; border: 1px solid var(--line);
  background: #fff; padding: 3px; }
.group-cards .noimg { display: flex; align-items: center; padding: 0 .5rem; font-size: .7rem; color: var(--muted); }
.group-cards .text { font-size: .9rem; }
.group-cards .links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .9rem; }
.group-cards .links form, .duplicates > form { margin: 0; }
.group-cards a.thumb { cursor: zoom-in; }

/* The comparison on the Dubletten page: two cards side by side, then their fields in one table */
.compare-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.compare h2 { font: 1.3rem/1.3 var(--serif); margin: .2rem 0 .75rem; }
.compare .images { position: static; }
.compare .images figure img { max-height: 55vh; }
.compare-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin: 1.5rem 0;
  padding: .75rem 1rem; background: var(--panel); }
.compare-actions form { margin: 0; }
.compare-fields { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .95rem; }
.compare-fields th, .compare-fields td { text-align: left; vertical-align: top; padding: .45rem .6rem;
  border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.compare-fields thead th { font-weight: 600; }
.compare-fields th[scope=row] { width: 10rem; color: var(--muted); font-weight: normal; font-size: .85rem; }
.compare-fields tr.diff td { background: #fbf1d6; }

.group-cards a.thumb:hover img { border-color: var(--accent); }

/* The image viewer (viewer.js): a dark layer over the page; the image is placed by the script */
body.viewer-open { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 100; background: rgba(20, 20, 22, .94); color: #eee; }
.viewer[hidden] { display: none; }
.viewer .stage { position: absolute; inset: 0 0 3rem; overflow: hidden; touch-action: none; cursor: zoom-out; }
.viewer .stage img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none;
  cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.viewer .stage.zoomed img { cursor: grab; }
.viewer .stage.zoomed img:active { cursor: grabbing; }
.viewer button { font: inherit; color: #eee; background: rgba(0, 0, 0, .45); border: 0; cursor: pointer; }
.viewer button:hover { background: rgba(0, 0, 0, .75); }
.viewer .close { position: absolute; top: .75rem; right: .75rem; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; font-size: 1.6rem; line-height: 1; }
.viewer .prev, .viewer .next { position: absolute; top: calc(50% - 1.5rem - 2.5rem); width: 3rem; height: 5rem;
  font-size: 2.2rem; line-height: 1; }
.viewer .prev { left: 0; border-radius: 0 .4rem .4rem 0; }
.viewer .next { right: 0; border-radius: .4rem 0 0 .4rem; }
.viewer .prev[hidden], .viewer .next[hidden], .viewer .record[hidden] { display: none; }
.viewer .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3rem; display: flex; align-items: center;
  gap: 1.25rem; padding: 0 1rem; font-size: .9rem; background: #141416; }
.viewer .caption { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer .counter { color: #aaa; white-space: nowrap; }
.viewer .record { color: #f0c8bd; white-space: nowrap; }
.viewer .zoom { display: flex; gap: .25rem; }
.viewer .zoom button { width: 2.25rem; height: 2.25rem; border-radius: .3rem; font-size: 1.2rem; }
.duplicates .confirm { margin-top: 1.25rem; }
.group-search { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; margin: .5rem 0 1rem; }
.group-search label { display: flex; flex-direction: column; font-size: .9rem; }
.group-search .label { color: var(--muted); font-size: .8rem; margin-bottom: .15rem; }
.group-search input:not([type=checkbox]), .group-search select { padding: .35rem .45rem; font: inherit;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.group-search input[type=search] { width: 17rem; }
.group-search input.short { width: 6rem; }
.group-search .arts { display: flex; gap: .9rem; padding-bottom: .4rem; }
.group-search .arts label { flex-direction: row; align-items: center; gap: .3rem; }
.pager { display: flex; gap: 1.25rem; }

/* The change history at the end of the detail page */
.history { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.history li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.history .when { margin: 0 0 .3rem; color: var(--muted); font-size: .85rem; }
.history dl { grid-template-columns: 8rem minmax(0, 1fr); gap: .25rem .75rem; }
.history del { color: var(--muted); }
.history ins { text-decoration: none; background: var(--notice-bg); }

/* Edit form (/ak/<ID>/bearbeiten): the detail page's layout, the form in the right column */
.editform .sandbox { margin: .25rem 0 1rem; }
.editform .field { margin-bottom: .8rem; }
.editform .label { display: block; color: var(--muted); font-size: .85rem; margin-bottom: .15rem; }
.editform input:not([type=checkbox]):not([type=radio]), .editform textarea, .editform select {
  width: 100%; padding: .4rem .5rem; font: inherit; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.editform textarea { resize: vertical; line-height: 1.45; }
.editform input.short { width: 8rem; }
.editform select { width: auto; }
/* a names field (Kunst's Künstler): one input per name, below each other, the "+ weiterer" button under them */
.editform .names { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.editform .names .add-name { font-size: .9rem; }
.editform .check label { display: flex; gap: .5rem; align-items: center; }
.editform .check .label { display: inline; margin: 0; }
.editform .invalid input, .editform .invalid textarea, .editform .invalid select { border-color: var(--fail); }
.field-error { margin: .2rem 0 0; color: var(--fail); font-size: .85rem; }
.field-warning { margin: .2rem 0 0; padding: .3rem .55rem; background: #fdf3dc; border-left: 3px solid #c98a12;
  font-size: .85rem; }
.field-warning[hidden] { display: none; }
.field-hint { margin: .2rem 0 0; font-size: .9rem; }
.field-hint[hidden] { display: none; }
/* the signature in the form: made from Sammlung + Inventarnummer, not typed */
.editform output#signature { display: block; padding: .4rem 0; font-weight: 600; }
.editform .actions { display: flex; gap: 1.25rem; align-items: center; margin-top: 2rem; }
/* Conflict: a field the other person changed meanwhile, with their value */
.editform .changed input:not([type=checkbox]):not([type=radio]), .editform .changed textarea,
.editform .changed select { border-color: var(--accent); }
.theirs { margin-top: .35rem; padding: .45rem .7rem; background: var(--panel); border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0; font-size: .85rem; }
.theirs .value { display: block; margin: .15rem 0; font-size: .95rem; }
.theirs .hint { margin-left: .5rem; }
.theirs button.take { font-size: .85rem; }
.theirs button.take:disabled { color: var(--muted); text-decoration: none; cursor: default; }
/* The compass as radio buttons: the round button is hidden, the cell shows the choice */
.compass.edit label { display: flex; cursor: pointer; }
.compass.edit label span { flex: 1; }
.compass.edit .special label { flex: 1 1 45%; }
.compass.edit input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.compass.edit input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.compass.edit input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.compass.edit label:hover span { border-color: var(--accent); }
.compass.edit .none { margin-top: 3px; max-width: 7.6rem; }
.compass.edit .none span { min-height: auto; font-size: .7rem; }

@media (max-width: 50rem) {
  header.site { padding: .5rem 1rem; gap: .75rem; }
  main.detail { padding: 0 1rem; }
  .detail .layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .images { position: static; }
  .fields dl { grid-template-columns: 1fr; gap: 0; }
  .fields dd { margin-bottom: .6rem; }
  header.site .logo img { height: 2.6rem; }
  header.site .site-name { display: none; }
  main.list { grid-template-columns: 1fr; gap: 1rem; padding: 0 1rem; }
  main.list > .notice { margin-bottom: 0; }
  .results .grid { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1.25rem 1rem; }
  .card .thumb { height: 9rem; }
  .viewer .zoom, .viewer .counter { display: none; }   /* phones: pinch to zoom */
  .compare-cards { grid-template-columns: 1fr; gap: 1.5rem; }
  .compare-fields th[scope=row] { width: 6rem; }
}

/* The page "Orte" (sammlung/pages/places.php): the list of places, the chosen place with its map */
main.places { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 2rem; max-width: 90rem;
  margin: 1.5rem auto; padding: 0 1.5rem; }
main.places > .notice { grid-column: 1 / -1; margin: 0 0 -1rem; }
.places-list { position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 2rem);
  display: flex; flex-direction: column; }
.places-list h1 { margin: .25rem 0 .5rem; }
.places-list .filter { margin: 0 0 .5rem; font-size: .9rem; }
.places-search { padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 4px; margin-bottom: .5rem; }
.place-new { display: flex; gap: .4rem; margin: 0 0 .5rem; }
.place-delete-link { margin-left: auto; font-size: .85rem; }
.place-rename { margin: .75rem 0; }
.place-new input { flex: 1; min-width: 0; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 4px; }
.places-list ul { list-style: none; margin: 0; padding: 0; overflow-y: auto; border-top: 1px solid var(--line); }
.places-list li a { display: grid; grid-template-columns: 1fr auto; column-gap: .5rem; padding: .3rem .4rem;
  border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: .9rem; }
.places-list li a:hover { background: var(--panel); }
.places-list li.current > a { background: var(--panel); border-left: 3px solid var(--accent); }
.places-list .count { color: var(--muted); text-align: right; }
.places-list .count small { font-size: .8rem; }
/* the tree (places within places): room for ▸ on the left, sub-places indented below their place */
.places-list ul.tree { padding-left: 1.2rem; }
.places-list ul ul { padding-left: 1rem; border-top: none; overflow: visible; }
.places-list li { position: relative; }
.places-list .toggle { position: absolute; left: -1.2rem; top: .25rem; width: 1.2rem; padding: 0; border: none;
  background: none; color: var(--muted); cursor: pointer; transition: transform .1s; }
.places-list .toggle[aria-expanded="true"] { transform: rotate(90deg); }
.place-path { margin: 0 0 .1rem; font-size: .9rem; color: var(--muted); }
.place-parent { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .25rem 0 .75rem; }
.place-parent input { width: 18rem; max-width: 100%; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 4px; }
.place-children { margin: 0 0 .75rem; font-size: .9rem; }
.place-children summary { cursor: pointer; color: var(--muted); }
.places-list .status { grid-column: 1 / -1; color: var(--muted); font-size: .8rem; }
.places-list .status.checked { color: var(--ok); }
/* "Brig · nur dieser Ort": the place's own cards, the first entry below it */
.places-list li.self .name { font-style: italic; }
.place h2 { margin: .25rem 0 .25rem; font-family: var(--serif); }
.place h2 .rename-link { margin-left: .75rem; font: .85rem system-ui, sans-serif; }   /* like the body text, not the heading */
.place-info { margin: 0 0 .75rem; font-size: .9rem; }
.map { height: 62vh; min-height: 22rem; border: 1px solid var(--line); border-radius: 4px; cursor: crosshair; }
.place-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: .75rem 0; }
.place-actions form { margin: 0; }
.place-actions .hint { margin: 0; }
.place-cards { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.place-cards a { display: flex; align-items: center; justify-content: center; width: 7.5rem; height: 6rem;
  background: var(--panel); border-radius: 4px; overflow: hidden; }
.place-cards img { max-width: 100%; max-height: 100%; }
.place-cards .noimg { color: var(--muted); font-size: .8rem; }
.place-names { margin: 1rem 0; padding: .75rem; background: var(--panel); border-radius: 4px; }
.name-search { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font-size: .9rem; }
.name-search input, .name-search select { font: inherit; padding: .25rem .5rem; border: 1px solid var(--line); border-radius: 4px; }
.name-search .or { color: var(--muted); }
.name-search .easy { margin-left: auto; }
.place-names .names-message { margin: .5rem 0 0; }
.place-names .names { list-style: none; margin: .5rem 0 0; padding: 0; }
.place-names .names li { display: grid; grid-template-columns: 1fr auto; column-gap: .75rem; align-items: center;
  padding: .3rem .4rem; border-top: 1px solid var(--line); }
.place-names .names li:hover { background: #fff; }
.place-names .names .details { grid-column: 1; color: var(--muted); font-size: .85rem; }
.place-names .names button { grid-row: 1 / span 2; grid-column: 2; }
.place-names .names li.no-point .name { color: var(--muted); }
.place-names .names .name { cursor: pointer; }
.place-names .names li.chosen { background: #fff; box-shadow: inset 3px 0 0 #8e24aa; }
.leaflet-tooltip.chosen-label { font-weight: 600; color: #8e24aa; border-color: #8e24aa; }