/* ------------------------------------------------------------ Schrift (lokal, ohne Google) */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------ Farben */
:root {
  color-scheme: light;
  --bg: #faf8f5;
  --bg-elev: #ffffff;
  --bg-sunk: #f1eee9;
  --glass: rgba(255, 255, 255, .78);
  --glass-border: rgba(255, 255, 255, .9);
  --radius: 24px;
  --radius-sm: 14px;
  --focus: #7c83f2;
  --focus-ring: 0 0 0 4px rgba(124, 131, 242, .18);
  --fg: #1a1a1a;
  --fg-muted: #6f6c67;
  --border: #e6e2dc;
  --btn-bg: #ffffff;
  --btn-fg: #1a1a1a;
  --primary-bg: #1a1a1a;
  --primary-fg: #ffffff;
  --accent: #6366f1;           /* Auswahl (Indigo, passend zum Login) */
  --accent-soft: rgba(99, 102, 241, .12);
  --ok: #2f7d4f;
  --ok-soft: rgba(47, 125, 79, .12);
  --warn: #9a6a00;
  --warn-soft: rgba(154, 106, 0, .12);
  --danger: #b42318;
  --danger-soft: rgba(180, 35, 24, .1);
  --tile-bg: #ebe7e1;
  /* Farbmarkierungen: gedämpft, gleiche Helligkeit, harmonieren miteinander */
  --c-red: #e06c62;
  --c-yellow: #e5b94e;
  --c-green: #6daf86;
  --c-blue: #5b8fd4;
  --c-purple: #9f82d6;
  --shadow: 0 1px 2px rgba(30, 20, 10, .04), 0 12px 32px -8px rgba(60, 40, 20, .14);
  --shadow-lg: 0 1px 2px rgba(30, 20, 10, .04), 0 24px 60px -12px rgba(60, 40, 20, .18);
}

/* ------------------------------------------------------------ Basis */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}
body.no-scroll { overflow: hidden; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 60vmax at 10% 0%, #fde2d4 0%, transparent 60%),
    radial-gradient(55vmax 55vmax at 100% 20%, #dbe7ff 0%, transparent 55%),
    radial-gradient(60vmax 60vmax at 50% 110%, #efe3fb 0%, transparent 60%),
    var(--bg);
}
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; margin-top: 1.2em; }
a { color: inherit; }
p { margin: 0 0 1em; }
img { max-width: 100%; display: block; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; }
[hidden] { display: none !important; }

.muted { color: var(--fg-muted); }
.small { font-size: .85rem; }
.error { color: var(--danger); }
.eyebrow {
  text-transform: uppercase; letter-spacing: .2em; font-size: .7rem;
  color: var(--fg-muted); margin: 0 0 .4rem;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.truncate { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.heart-inline { color: var(--accent); }

/* ------------------------------------------------------------ Buttons & Formulare */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 42px; padding: .5em 1.15em;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--btn-bg); color: var(--btn-fg);
  font: inherit; font-weight: 550; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s, opacity .15s;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(30, 20, 10, .05);
}
.btn:hover { border-color: #cfc9c1; box-shadow: 0 4px 12px -4px rgba(60, 40, 20, .15); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--focus); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.btn.primary {
  background: var(--primary-bg); color: var(--primary-fg); border-color: var(--primary-bg);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45);
}
.btn.primary:hover:not(:disabled) { background: #000; box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .5); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: rgba(255, 255, 255, .6); }
.btn.small { min-height: 36px; padding: .3em .95em; font-size: .88rem; border-radius: 10px; }
.btn.wide { width: 100%; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger-ghost { background: transparent; color: var(--danger); }
.btn-sub { font-weight: 400; opacity: .7; font-size: .85em; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--btn-bg); color: var(--fg); cursor: pointer; padding: 0;
  box-shadow: 0 1px 2px rgba(30, 20, 10, .05);
}
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.input {
  width: 100%; min-height: 46px; padding: .6em .95em;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: #fff; color: var(--fg); font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: var(--focus); box-shadow: var(--focus-ring); }
.input.big { font-size: 1.3rem; text-align: center; letter-spacing: .12em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; min-height: 54px; }
textarea.input { resize: vertical; }
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }
.field > span { font-size: .85rem; font-weight: 500; }
.field.inline { flex-direction: row; align-items: center; gap: .6rem; margin: 0; }
.field.inline .input { width: auto; }
.check { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.form-grid .span-2 { grid-column: span 2; }
.form-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.inline-form { display: flex; gap: .5rem; margin: .6rem 0 .3rem; }
.inline-form .input { flex: 1; }
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .inline-form { flex-direction: column; }
}

.card {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--shadow);
  padding: clamp(1.1rem, 3vw, 1.8rem); margin-bottom: 1.4rem;
}
.card.narrow { width: min(420px, 100%); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.card-head h2 { margin: 0; }

.badge {
  display: inline-block; padding: .15em .7em; border-radius: 999px;
  font-size: .78rem; font-weight: 500; background: var(--bg-sunk); color: var(--fg-muted); white-space: nowrap;
}
.badge.status-selection { background: var(--warn-soft); color: var(--warn); }
.badge.status-submitted { background: var(--accent-soft); color: var(--accent); }
.badge.status-editing { background: var(--bg-sunk); color: var(--fg); }
.badge.status-done { background: var(--ok-soft); color: var(--ok); }
.badge.expired { background: var(--danger-soft); color: var(--danger); }

.flash { padding: .75rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-weight: 500; }
.flash.ok { background: var(--ok-soft); color: var(--ok); }
.flash.err { background: var(--danger-soft); color: var(--danger); }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 100;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--primary-bg); color: var(--primary-fg);
  padding: .7rem 1.3rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-weight: 500;
  transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.no-scroll .toast { bottom: auto; top: calc(64px + env(safe-area-inset-top)); }
.toast.error { background: var(--danger); color: #fff; }

.dialog {
  border: 1px solid var(--glass-border); border-radius: var(--radius); padding: clamp(1.4rem, 5vw, 2rem);
  background: #fff; color: var(--fg); width: min(440px, calc(100vw - 32px));
  box-shadow: var(--shadow-lg);
}
.dialog[open] { animation: welcome-in .3s cubic-bezier(.2, .8, .2, 1) both; }
.dialog::backdrop { background: rgba(40, 30, 20, .35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dialog textarea.input { margin-bottom: 1rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.confirm-modal { width: min(400px, calc(100vw - 32px)); }
.confirm-modal h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.confirm-modal p { margin-bottom: 1.4rem; }
.btn.danger { box-shadow: 0 8px 20px -8px rgba(180, 35, 24, .5); }
.btn.danger:hover { background: #9b1c12; border-color: #9b1c12; }

/* ------------------------------------------------------------ Login */
.center-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.recent { margin-top: 1.6rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.recent p { margin-bottom: .4rem; }
.recent-item { display: flex; justify-content: space-between; padding: .5rem 0; text-decoration: none; border-bottom: 1px solid var(--border); }

/* ------------------------------------------------------------ Willkommen / Login */
.welcome {
  min-height: 100vh; min-height: 100dvh; padding: 24px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
}
.welcome-card h1 { font-size: 1.6rem; margin-bottom: 1.2rem; }
.welcome-card {
  width: min(430px, 100%); padding: clamp(28px, 6vw, 44px);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 28px;
  box-shadow: 0 1px 2px rgba(30, 20, 10, .04), 0 24px 60px -12px rgba(60, 40, 20, .18);
  text-align: center;
  animation: welcome-in .5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes welcome-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .welcome-card { animation: none; } }
.welcome-icon {
  width: 64px; height: 64px; margin: 0 auto 1.2rem; border-radius: 20px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #f59e7b 0%, #d9669b 50%, #7c83f2 100%);
  box-shadow: 0 10px 24px -6px rgba(217, 102, 155, .55);
}
.welcome-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.welcome h1 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.2rem); margin-bottom: .4rem; }
.welcome-lead { color: var(--fg-muted); font-size: 1rem; margin: 0 auto 1.6rem; max-width: 30ch; }
.welcome-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.pw-field {
  display: flex; align-items: center; gap: .6rem; padding: 0 1.1rem;
  height: 56px; border-radius: 16px; background: #fff;
  border: 1.5px solid var(--border); transition: border-color .15s, box-shadow .15s;
}
.pw-field:focus-within { border-color: #7c83f2; box-shadow: 0 0 0 4px rgba(124, 131, 242, .18); }
.pw-field.has-error { border-color: var(--danger); }
.pw-field svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--fg-muted); stroke-width: 1.7; stroke-linecap: round; }
.pw-field input {
  flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: none; color: var(--fg);
  font: 500 1.15rem/1 "Inter", sans-serif; letter-spacing: .08em;
}
.pw-field input::placeholder { color: #a8a39b; letter-spacing: 0; font-weight: 400; }
.welcome-note { margin: 0; color: var(--fg-muted); font-size: .82rem; text-align: left; line-height: 1.45; }
.welcome-card > .welcome-note { margin-top: 1rem; text-align: center; }
.welcome-check { margin: 0; text-align: left; font-size: .9rem; align-items: flex-start; }
.welcome-check input { margin-top: 2px; flex-shrink: 0; }
.pw-field input.plain { letter-spacing: 0; font-size: 1rem; }
.welcome-error { margin: 0; padding: .55rem .9rem; border-radius: 12px; background: var(--danger-soft); color: var(--danger); font-size: .9rem; }
.welcome-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  height: 56px; border: 0; border-radius: 16px; cursor: pointer; text-decoration: none;
  background: #1a1a1a; color: #fff; font: 600 1rem "Inter", sans-serif;
  transition: transform .12s, box-shadow .15s, background .15s;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45);
}
.welcome-btn:hover { background: #000; box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .5); }
.welcome-btn:active { transform: scale(.98); }
.welcome-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.welcome-btn:hover svg { transform: translateX(3px); }
.welcome-or { display: flex; align-items: center; gap: .8rem; margin: 1.5rem 0 1rem; color: #a8a39b; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; }
.welcome-or::before, .welcome-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.welcome-qr { display: flex; align-items: center; gap: .8rem; margin: 0; text-align: left; color: var(--fg-muted); font-size: .9rem; }
.welcome-qr svg { width: 36px; height: 36px; flex-shrink: 0; padding: 7px; border-radius: 10px; background: var(--bg-sunk); fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linejoin: round; }
.welcome .recent { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); text-align: left; }
.recent-label { color: var(--fg-muted); font-size: .8rem; margin-bottom: .3rem; }
.welcome-foot { color: var(--fg-muted); font-size: .85rem; margin: 0; }

/* ------------------------------------------------------------ Galerie */
.gallery-page { padding: 0 clamp(16px, 3vw, 40px) 60px; }
.topbar {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: clamp(20px, 4vw, 48px) 0 clamp(16px, 2.5vw, 28px);
}
.topbar h1 { margin-bottom: .2rem; }
.topbar p { margin: 0; }
.topbar-actions { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }
.admin-banner {
  margin: 0 calc(-1 * clamp(16px, 3vw, 40px)); padding: .5rem 1rem; text-align: center;
  background: var(--warn-soft); color: var(--warn); font-size: .85rem;
}
.note {
  white-space: pre-line; background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow);
  border-radius: var(--radius-sm); padding: 1rem 1.3rem; margin-bottom: 1.4rem; max-width: 70ch;
}
.tabs {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 1rem; border-radius: 16px;
  background: rgba(255, 255, 255, .55); border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.tab {
  background: none; border: 0; border-radius: 12px;
  padding: .55rem 1.1rem; font: inherit; font-weight: 550; color: var(--fg-muted); cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--fg); background: #fff; box-shadow: 0 1px 2px rgba(30, 20, 10, .06), 0 4px 12px -4px rgba(60, 40, 20, .15); }
.tab .count { font-weight: 400; font-size: .85em; opacity: .7; margin-left: .2em; }

.toolbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 0 calc(-1 * clamp(16px, 3vw, 40px)); padding: .7rem clamp(16px, 3vw, 40px);
  background: rgba(250, 248, 245, .72);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 8px 24px -16px rgba(60, 40, 20, .25);
  margin-bottom: 1rem;
}
.toolbar-info, .toolbar-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.sel-counter strong { font-size: 1.1rem; color: var(--accent); }
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 12px; padding: 3px; background: rgba(255, 255, 255, .7); }
.segmented button {
  border: 0; background: none; font: inherit; font-size: .85rem; font-weight: 550; padding: .3em .9em;
  border-radius: 9px; cursor: pointer; color: var(--fg-muted); transition: background .15s, color .15s;
}
.segmented button.active { background: #fff; color: var(--fg); box-shadow: 0 1px 2px rgba(30, 20, 10, .08), 0 2px 8px -2px rgba(60, 40, 20, .15); }
.status-banner {
  background: rgba(236, 248, 241, .85); color: var(--fg); padding: 1rem 1.3rem; border-radius: var(--radius-sm); margin: 1rem 0;
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow);
}
.status-banner strong { color: var(--ok); }
/* Filterleiste */
.filter-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 14px; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; padding: 0 .85rem;
  border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .7);
  font: 550 .85rem "Inter", sans-serif; color: var(--fg-muted); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.chip:hover { color: var(--fg); border-color: #cfc9c1; }
.chip.active { background: var(--primary-bg); border-color: var(--primary-bg); color: #fff; }
.chip.active .chip-n { color: rgba(255, 255, 255, .7); }
.chip-n { font-weight: 450; font-size: .8em; color: #a8a39b; }
.chip-n:empty { display: none; }
.chip.is-empty:not(.active) { opacity: .45; }
.color-chip { padding: 0 .6rem; }
.color-chip .cdot { width: 14px; height: 14px; }
.color-chip.active { background: #fff; color: var(--fg); border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.color-chip.active .chip-n { color: var(--fg-muted); }
.chip-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
@media (max-width: 700px) {
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * clamp(16px, 3vw, 40px)) 12px; padding: 2px clamp(16px, 3vw, 40px); scrollbar-width: none; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; }
}
.empty, .empty-filter { text-align: center; color: var(--fg-muted); padding: 4rem 1rem; }

/* Justified Grid: Kachelbreite proportional zum Seitenverhältnis */
.grid { display: flex; flex-wrap: wrap; gap: 14px; }
.grid::after { content: ""; flex-grow: 999; }
.tile {
  --h: 240px;
  position: relative; margin: 0;
  flex: var(--r) 1 calc(var(--r) * var(--h));
  max-width: calc(var(--r) * var(--h) * 1.6);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(30, 20, 10, .05), 0 8px 24px -10px rgba(60, 40, 20, .2);
  transition: box-shadow .2s, transform .2s;
}
@media (hover: hover) {
  .tile:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(30, 20, 10, .05), 0 16px 32px -12px rgba(60, 40, 20, .3); }
}
@media (max-width: 700px) { .tile { --h: 110px; border-radius: 12px; } .grid { gap: 8px; } }
@media (max-width: 560px) {
  .toolbar { gap: .5rem; padding-top: .5rem; padding-bottom: .5rem; }
  .toolbar .btn { min-height: 34px; padding: .3em .9em; font-size: .88rem; }
  .toolbar .btn-sub, #mark-info { display: none; }
  .toolbar-actions { gap: .5rem; }
  .segmented button { padding: .25em .7em; }
}
.tile.filtered-out { display: none; }
.tile-open { display: block; width: 100%; padding: 0; border: 0; background: var(--tile-bg); cursor: zoom-in; }
.tile img { width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; transition: opacity .2s, filter .2s; }
/* Auswahl-Kreis oben rechts: dezent sichtbar, großer Tippbereich */
.tile-heart, .tile-mark {
  position: absolute; top: 2px; right: 2px; width: 44px; height: 44px;
  border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.ring {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, .95);
  background: rgba(0, 0, 0, .12);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 1px 4px rgba(0, 0, 0, .25);
  transition: background .15s, border-color .15s, transform .12s;
}
.ring svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s; }
.tile-heart:active .ring, .tile-mark:active .ring { transform: scale(.88); }
@media (hover: hover) {
  .tile-heart:hover .ring, .tile-mark:hover .ring { background: rgba(255, 255, 255, .35); }
  .tile-heart:hover .ring svg, .tile-mark:hover .ring svg { opacity: .7; }
}
.tile.is-selected .ring { background: var(--accent); border-color: var(--accent); }
.tile.is-marked .ring { background: var(--primary-bg); border-color: #fff; }
.tile.is-selected .ring svg, .tile.is-marked .ring svg { opacity: 1; }
.tile.is-selected, .tile.is-selected:hover { box-shadow: 0 0 0 3px var(--accent), 0 12px 28px -10px rgba(99, 102, 241, .45); }
.tile.is-marked, .tile.is-marked:hover { box-shadow: 0 0 0 3px var(--primary-bg), 0 12px 28px -10px rgba(0, 0, 0, .35); }
.tile.is-marked img { opacity: .85; }
/* Leiste unter dem Bild: Anmerkung links, Ablehnen rechts */
.tile-bar { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; min-height: 38px; }
.bar-left { display: flex; align-items: center; }
.tile-bar > .tile-reject { margin-left: auto; }
/* Farbmarkierung: eingefärbte Leiste mit kräftiger Linie + Fähnchen auf dem Bild */
.tile[data-color] .tile-bar {
  background: color-mix(in srgb, var(--tile-color) 22%, #fff);
  box-shadow: inset 0 4px 0 var(--tile-color);
}
.tile[data-color] .bar-btn { color: color-mix(in srgb, var(--tile-color) 45%, #1a1a1a); }
.tile[data-color] .bar-btn:hover { background: color-mix(in srgb, var(--tile-color) 30%, #fff); }
.tile-flag {
  position: absolute; top: 0; left: 14px; width: 22px; height: 32px; pointer-events: none;
  background: var(--tile-color); border-radius: 0 0 6px 6px;
  border: 2px solid #fff; border-top: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s;
}
.tile[data-color] .tile-flag { opacity: 1; transform: none; }
.tile[data-color].is-marked .tile-flag, .tile[data-color].is-selected .tile-flag { top: 3px; }
.tile[data-color="red"] { --tile-color: var(--c-red); }
.tile[data-color="yellow"] { --tile-color: var(--c-yellow); }
.tile[data-color="green"] { --tile-color: var(--c-green); }
.tile[data-color="blue"] { --tile-color: var(--c-blue); }
.tile[data-color="purple"] { --tile-color: var(--c-purple); }
.tile-color .dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.7px solid currentColor; background: none; transition: background .15s, border-color .15s;
}
.tile[data-color] .tile-color .dot { background: var(--tile-color); border-color: #fff; box-shadow: 0 0 0 1.5px var(--tile-color); width: 18px; height: 18px; }

/* Farbauswahl */
.color-pop {
  position: absolute; z-index: 60; display: flex; gap: 6px; padding: 8px;
  background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--border), var(--shadow-lg);
}
.swatch {
  width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid var(--bg-elev); box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  display: grid; place-items: center; transition: transform .12s, box-shadow .12s;
}
.swatch:hover { transform: scale(1.1); }
.swatch.active { box-shadow: 0 0 0 2px var(--fg); }
.swatch[data-color="red"] { background: var(--c-red); }
.swatch[data-color="yellow"] { background: var(--c-yellow); }
.swatch[data-color="green"] { background: var(--c-green); }
.swatch[data-color="blue"] { background: var(--c-blue); }
.swatch[data-color="purple"] { background: var(--c-purple); }
.swatch.none { background: var(--bg-sunk); color: var(--fg-muted); }
.swatch.none svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tile-bar:empty { display: none; }
.bar-btn {
  width: 34px; height: 34px; border: 0; border-radius: 8px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: none; color: var(--fg-muted); transition: background .15s, color .15s;
}
.bar-btn:only-child.tile-reject { margin-left: auto; }
.bar-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bar-btn:hover { background: var(--bg-sunk); color: var(--fg); }
/* Anmerkungs-Verlauf (unter dem Bild, im Dialog, in der Großansicht, im Admin) */
.thread { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
/* eine Zeile Vorschau in der Leiste statt ganzem Verlauf */
.tile-preview {
  flex: 1; min-width: 0; margin: 0 4px; padding: 4px 6px; border: 0; border-radius: 8px; background: none;
  font: .8rem/1.3 "Inter", sans-serif; color: var(--fg); text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile-preview:hover { background: var(--bg-sunk); }
.tile-preview strong { font-weight: 650; }
.tile-note { position: relative; }
.note-count {
  position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--fg); color: #fff; font: 700 .65rem/16px "Inter", sans-serif; text-align: center;
}
.note-count:empty { display: none; }
.tile.has-notes .tile-note { color: var(--fg); }
.note-item { position: relative; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; color: var(--fg); }
.note-name { font-weight: 650; }
.note-item.admin .note-name { color: #b4541f; }
.cd-thread, .lb-thread { margin: 0 0 .9rem; padding: .75rem .9rem; border-radius: var(--radius-sm); background: var(--bg-sunk); max-height: 220px; overflow-y: auto; gap: 8px; }
.lb-thread { margin-bottom: .5rem; max-height: 120px; font-size: .9rem; }
.cd-thread .note-item, .lb-thread .note-item { padding-right: 26px; }
.note-del {
  position: absolute; top: -2px; right: -4px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px;
  display: grid; place-items: center; background: none; color: var(--fg-muted); cursor: pointer;
}
.note-del:hover { background: rgba(0, 0, 0, .06); color: var(--danger); }
.note-del svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.note-time { color: var(--fg-muted); font-size: .78rem; margin-left: .3rem; }
.note-acts { display: flex; gap: .8rem; margin-top: 3px; }
.note-item.is-fresh { animation: note-fresh 2s ease-out; }
@keyframes note-fresh {
  0% { box-shadow: 0 0 0 2px var(--accent); background-color: var(--accent-soft); transform: translateY(4px); opacity: .4; }
  15% { transform: none; opacity: 1; }
  70% { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .note-item.is-fresh { animation: none; } }
.note-act { border: 0; background: none; padding: 0; font: 600 .75rem "Inter", sans-serif; color: var(--fg-muted); cursor: pointer; }
.note-act:hover { color: var(--fg); text-decoration: underline; }
.note-act.del:hover { color: var(--danger); }
.lb-thread .note-item, .cd-thread .note-item { padding-right: .75rem; }
.lb-thread .note-item.is-reply { margin-left: 1.4rem; border-left: 0; padding-left: .75rem; }
.lb-thread .note-item.is-reply::before, .cd-thread .note-item.is-reply::before {
  content: ""; position: absolute; left: -.9rem; top: .9rem; width: .6rem; height: .6rem;
  border-left: 2px solid var(--border); border-bottom: 2px solid var(--border); border-bottom-left-radius: 6px;
}
.reply-to {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 6px; padding: .45rem .5rem .45rem .75rem;
  border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: .82rem; font-weight: 550;
}
.reply-to span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-to button { width: 24px; height: 24px; flex-shrink: 0; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; }
.reply-to button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.tile-reject[aria-pressed="true"] { color: var(--danger); background: var(--danger-soft); }
.tile.is-rejected img { opacity: .3; filter: grayscale(1); }
.tile.is-rejected .ring { opacity: .6; }

/* Info-Symbol mit Hinweistext (Hover / Tippen) */
.info {
  position: relative; display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; color: var(--fg-muted); cursor: help; outline: none;
}
.info:hover, .info:focus-visible, .info.open { color: var(--fg); background: var(--bg-sunk); }
.info > svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.info-pop {
  display: none; position: absolute; z-index: 40; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: 300px; padding: .95rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--primary-bg); color: var(--primary-fg); box-shadow: var(--shadow);
  font-size: .85rem; line-height: 1.5; text-align: left; cursor: default;
}
.info:hover .info-pop, .info:focus .info-pop, .info.open .info-pop { display: block; }
@media (max-width: 700px) {
  /* auf dem Handy über die volle Breite der Leiste */
  .info { position: static; }
  .info-pop { left: 16px; right: 16px; width: auto; transform: none; top: 100%; }
}

/* ------------------------------------------------------------ Lightbox */
/* Desktop: Bild links, Seitenleiste rechts · Handy: Bild oben, Panel darunter */
.lightbox {
  position: fixed; inset: 0; z-index: 50; background: #f3f1ed;
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
}
.lb-main { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; padding-top: env(safe-area-inset-top); }
.lb-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 14px 18px; }
.lb-pos { font-size: .85rem; font-weight: 550; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.lb-close svg { stroke-width: 1.8; }
.lb-stage {
  position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);   /* Bild passt sich dem Platz an, nicht umgekehrt */
  padding: 0 72px 24px; touch-action: pan-y;
}
.lb-stage img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: 6px; box-shadow: 0 20px 50px -20px rgba(40, 30, 20, .45);
  user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none;
  transition: opacity .2s, filter .2s;
}
.lb-stage img.is-rejected { opacity: .45; filter: grayscale(1); }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border: 1px solid var(--border); border-radius: 50%;
  background: rgba(255, 255, 255, .85); color: var(--fg); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow); transition: background .15s, transform .15s;
}
.lb-nav:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.lb-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lb-nav.prev { left: 14px; }
.lb-nav.next { right: 14px; }

.lb-panel {
  display: flex; flex-direction: column; gap: 0; min-height: 0; overflow-y: auto;
  background: #fff; border-left: 1px solid var(--border);
  padding: calc(18px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom));
  box-shadow: -12px 0 40px -24px rgba(60, 40, 20, .3);
}
.lb-head { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.lb-name { font-weight: 650; font-size: 1rem; overflow-wrap: anywhere; }
.lb-meta { color: var(--fg-muted); font-size: .85rem; margin-top: 2px; }
.lb-section { padding: 16px 0; border-bottom: 1px solid var(--border); }
.lb-label { font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); margin: 0 0 10px; }
.lightbox:not(.is-raw) .raw-only, .lightbox:not(.is-final) .final-only { display: none !important; }

/* Entscheidung: große, klare Schaltflächen */
.lb-decide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lb-choice {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1rem; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--border); background: #fff; color: var(--fg);
  font: 600 .95rem "Inter", sans-serif; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.lb-choice:hover:not(:disabled) { border-color: #cfc9c1; }
.lb-choice:active:not(:disabled) { transform: scale(.98); }
.lb-choice:disabled { opacity: .5; cursor: default; }
.lb-choice > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-heart .ring { width: 20px; height: 20px; border-color: currentColor; background: none; box-shadow: none; }
.lb-heart .ring svg { width: 13px; height: 13px; }
.lb-heart.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.lb-heart.active .ring { border-color: #fff; }
.lb-heart.active .ring svg { opacity: 1; }
.lb-reject.active { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.lb-download { background: var(--primary-bg); border-color: var(--primary-bg); color: #fff; }
.lb-download:hover { background: #000; }

.lb-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-colors .swatch { width: 34px; height: 34px; }
.lb-colors.readonly { pointer-events: none; }
.lb-colors.readonly .swatch:not(.active) { display: none; }

/* Anmerkungen wie ein Chat: Verlauf oben, Eingabe unten */
.lb-notes { flex: 1; display: flex; flex-direction: column; min-height: 180px; border-bottom: 0; }
.lb-thread { flex: 1; align-content: start; margin: 0 0 10px; padding: 0; background: none; max-height: none; overflow-y: auto; gap: 8px; font-size: .9rem; }
.lb-thread .note-item { background: var(--bg-sunk); border-radius: 12px; padding: .55rem 2rem .55rem .75rem; }
.lb-thread .note-item.admin { background: #fdf0e6; }
.lb-thread .note-del { top: 4px; right: 4px; }
.lb-send-row {
  display: flex; gap: 6px; align-items: flex-end; padding: 6px;
  border: 1.5px solid var(--border); border-radius: 14px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.lb-send-row:focus-within { border-color: var(--focus); box-shadow: var(--focus-ring); }
.lb-send-row textarea {
  flex: 1; min-height: 44px; max-height: 160px; padding: .5rem .55rem; resize: none;
  border: 0; outline: 0; background: none; color: var(--fg); font: inherit; line-height: 1.4;
}
.lb-send {
  width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; background: var(--primary-bg); color: #fff;
}
.lb-send:hover { background: #000; }
.lb-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-keys { margin: 12px 0 0; font-size: .75rem; color: var(--fg-muted); line-height: 1.5; }

@media (max-width: 900px) {
  .lightbox { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .lb-top { position: absolute; inset: 0 0 auto 0; z-index: 2; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
  .lb-pos { background: rgba(255, 255, 255, .85); padding: 4px 10px; border-radius: 999px; }
  .lb-main { padding-top: 0; grid-template-rows: minmax(0, 1fr); }
  .lb-stage { padding: 58px 8px 10px; }
  .lb-stage img { border-radius: 4px; }
  .lb-nav { display: none; }
  .lb-panel {
    max-height: 48vh; border-left: 0; border-radius: 22px 22px 0 0;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px -20px rgba(60, 40, 20, .35);
  }
  .lb-head { display: none; }
  .lb-section { padding: 12px 0; }
  .lb-section:first-of-type { padding-top: 4px; }
  .lb-notes { min-height: 0; }
  .lb-thread { max-height: 30vh; }
  .lb-keys { display: none; }
}

/* ------------------------------------------------------------ Vorher / Nachher */
.ba { position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 20px 50px -20px rgba(40, 30, 20, .45); touch-action: none; cursor: ew-resize; user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ba-before-clip { position: absolute; inset: 0; }
.ba-handle { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, .4); pointer-events: none; }
.ba-handle span {
  position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.ba-handle span::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; color: #1a1a1a; letter-spacing: 2px; }
.ba-label { position: absolute; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .75rem; font-weight: 600; pointer-events: none; }
.ba-label.l { left: 12px; } .ba-label.r { right: 12px; }
.ba-range { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; opacity: 0; height: 1px; }
.lb-decide .lb-ba-toggle { grid-column: 1 / -1; order: 3; }
.lb-ba-toggle.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------ Vergleichen */
.compare-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.compare-btn.active { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.compare-picking .tile-open { cursor: copy; }
.compare-picking .tile:not(.is-compare) img { opacity: .75; }
.tile.is-compare { box-shadow: 0 0 0 3px var(--fg), 0 12px 28px -10px rgba(0, 0, 0, .35); }
.tile.is-compare::after {
  content: attr(data-cmp); position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--fg); color: #fff; font-weight: 700; font-size: .9rem; pointer-events: none;
}
.compare-bar {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 45;
  display: flex; align-items: center; gap: .6rem; padding: 8px 8px 8px 18px; border-radius: 18px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); white-space: nowrap; font-weight: 550; font-size: .9rem;
}
.compare { position: fixed; inset: 0; z-index: 48; background: #f3f1ed; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.compare-top { display: flex; justify-content: space-between; align-items: center; padding: calc(12px + env(safe-area-inset-top)) 18px 12px; }
.compare-grid { display: grid; gap: 14px; padding: 0 18px calc(18px + env(safe-area-inset-bottom)); min-height: 0; }
.compare-grid[data-n="2"] { grid-template-columns: 1fr 1fr; }
.compare-grid[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
.compare-grid[data-n="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cmp-cell { margin: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); transition: box-shadow .15s; }
.cmp-cell.is-selected { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
.cmp-cell.is-rejected .cmp-img img { opacity: .35; filter: grayscale(1); }
.cmp-img { min-height: 0; border: 0; padding: 8px; background: var(--tile-bg); cursor: zoom-in; display: grid; place-items: center; }
.cmp-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cmp-cell figcaption { display: grid; gap: 6px; padding: 8px 10px 10px; }
.cmp-head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.cmp-name { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; max-width: 45%; }
.cmp-preview { flex: 1; min-width: 0; border: 0; background: none; padding: 0; font: .8rem "Inter", sans-serif; color: var(--fg-muted); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-preview strong { color: var(--fg); }
.cmp-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cmp-actions .lb-choice { min-height: 38px; padding: 0 .75rem; font-size: .85rem; border-radius: 11px; gap: .4rem; }
.cmp-actions .lb-choice > svg { width: 17px; height: 17px; }
.cmp-select, .cmp-mark { flex: 1; }
.cmp-mark .ring { width: 18px; height: 18px; border-color: currentColor; background: none; box-shadow: none; }
.cmp-mark .ring svg { width: 12px; height: 12px; }
.cmp-mark.active { background: var(--primary-bg); border-color: var(--primary-bg); color: #fff; }
.cmp-mark.active .ring { border-color: #fff; } .cmp-mark.active .ring svg { opacity: 1; }
.cmp-color .dot { width: 18px; height: 18px; border-radius: 50%; border: 1.7px solid currentColor; }
.cmp-cell[data-color] .cmp-color .dot { background: var(--cmp-color); border-color: #fff; box-shadow: 0 0 0 1.5px var(--cmp-color); }
.cmp-cell[data-color] figcaption { box-shadow: inset 0 4px 0 var(--cmp-color); background: color-mix(in srgb, var(--cmp-color) 18%, #fff); }
.cmp-cell[data-color="red"] { --cmp-color: var(--c-red); } .cmp-cell[data-color="yellow"] { --cmp-color: var(--c-yellow); }
.cmp-cell[data-color="green"] { --cmp-color: var(--c-green); } .cmp-cell[data-color="blue"] { --cmp-color: var(--c-blue); }
.cmp-cell[data-color="purple"] { --cmp-color: var(--c-purple); }
.cmp-note { position: relative; }
.cmp-note svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.cmp-note .note-count { top: -5px; right: -5px; }
.cmp-select .ring { width: 18px; height: 18px; border-color: currentColor; background: none; box-shadow: none; }
.cmp-select .ring svg { width: 12px; height: 12px; }
.cmp-select.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cmp-select.active .ring { border-color: #fff; } .cmp-select.active .ring svg { opacity: 1; }
.cmp-reject.active { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
@media (max-width: 700px) {
  .compare-grid, .compare-grid[data-n] { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 8px; padding: 0 8px 12px; }
  .compare-grid[data-n="3"] > :first-child { grid-column: 1 / -1; }
  .cmp-cell figcaption { flex-direction: column; align-items: stretch; }
  .cmp-actions .lb-choice { flex: 1; }
  .compare-bar { left: 12px; right: 12px; transform: none; justify-content: space-between; }
}

/* ------------------------------------------------------------ Weitere Bilder anfragen */
.extra-banner {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .9rem 1.1rem; margin: 0 0 1rem;
  border-radius: var(--radius-sm); background: rgba(99, 102, 241, .08); border: 1px solid rgba(99, 102, 241, .2); font-weight: 500;
}
.extra-banner span { flex: 1; min-width: 200px; }
.extra-close { width: 32px; height: 32px; }
.extra-close svg { width: 14px; height: 14px; }
.extra-btn { border-color: var(--accent); color: var(--accent); }
.extra-count { display: flex; gap: 6px; margin-bottom: 1rem; }

/* ------------------------------------------------------------ Admin */
.admin-page { min-height: 100vh; }
.admin-top {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 30;
  padding: 12px clamp(16px, 3vw, 32px);
  background: rgba(250, 248, 245, .72); border-bottom: 1px solid rgba(255, 255, 255, .8);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 8px 24px -16px rgba(60, 40, 20, .25);
}
.admin-brand { text-decoration: none; font-weight: 650; font-size: 1.05rem; letter-spacing: -.01em; display: flex; align-items: baseline; gap: .7rem; }
.admin-brand .eyebrow { margin: 0; }
.admin-nav { display: flex; gap: .5rem; align-items: center; }
.settings-btn { text-decoration: none; }
.settings-btn svg { width: 19px; height: 19px; stroke-width: 1.6; }
.admin-main { max-width: 1200px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 32px) 80px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.page-head h1 { margin: .3rem 0 .2rem; }
.page-head p { margin: 0; }
.page-head-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.admin-cols > .card { margin-bottom: 0; }
.admin-cols + .card { margin-top: 1.4rem; }
@media (max-width: 900px) { .admin-cols { grid-template-columns: 1fr; } }

.gallery-list { display: grid; gap: .8rem; }
.gallery-row {
  display: grid; grid-template-columns: 2fr 1.4fr 1.4fr auto; gap: 1rem; align-items: center;
  padding: 1.1rem 1.4rem; text-decoration: none;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 18px;
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
}
.gallery-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.gr-main { display: flex; flex-direction: column; min-width: 0; }
.gr-stats { display: flex; gap: .9rem; flex-wrap: wrap; }
.gr-status { text-align: right; }
@media (max-width: 760px) {
  .gallery-row { grid-template-columns: 1fr auto; }
  .gr-stats, .gr-meta { grid-column: 1 / -1; }
  .gr-status { grid-row: 1; grid-column: 2; }
}

.access { display: flex; gap: 1.2rem; align-items: flex-start; margin-bottom: 1rem; flex-wrap: wrap; }
.qr { width: 160px; height: 160px; border-radius: 16px; background: #fff; padding: 6px; box-shadow: var(--shadow); flex-shrink: 0; image-rendering: pixelated; }
.access-info { flex: 1; min-width: 220px; display: grid; gap: .7rem; }
.kv { display: grid; gap: .1rem; min-width: 0; }
.copy-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.copy-row code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw { font-size: 1.25rem; letter-spacing: .08em; }
.details { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .8rem; }
.details summary { cursor: pointer; font-weight: 500; }

.export { background: rgba(241, 238, 233, .7); border-radius: var(--radius-sm); padding: 1.1rem; margin-bottom: 1rem; }
.export-opts { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: .7rem; }
.export-opts .check { margin: 0; }
.export textarea { margin-bottom: .6rem; }

.comment-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.comment-list li { display: flex; gap: .9rem; align-items: flex-start; padding: .7rem; background: rgba(255, 255, 255, .7); border-radius: var(--radius-sm); }
.comment-list img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.thread-body { flex: 1; min-width: 0; display: grid; gap: .5rem; }
.comment-list .thread { font-size: .9rem; }
.note-del-form { display: inline; }
.link-btn.note-del { position: static; display: inline; width: auto; height: auto; font-size: .78rem; color: var(--fg-muted); margin-left: .4rem; }
.reply-form { display: flex; gap: .5rem; flex: 1; }
.thread-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.threads-foot { justify-content: space-between; margin-top: .6rem; }
.note-reply { display: inline; }
.note-reply > summary { display: inline; list-style: none; cursor: pointer; }
.note-reply > summary::-webkit-details-marker { display: none; }
.note-reply[open] > .reply-form { margin: .4rem 0 .2rem; }
/* Antworten mit Zitat: eingerückt unter der Ursprungs-Anmerkung */
.note-item.is-reply { margin-left: 1.2rem; padding-left: .7rem; border-left: 2px solid var(--border); }
.note-quote {
  display: block; margin-bottom: 2px; padding: 2px 8px; border-radius: 6px;
  background: rgba(0, 0, 0, .04); color: var(--fg-muted); font-size: .85em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reply-form .input { min-height: 38px; padding: .4em .8em; }

.dropzone {
  border: 2px dashed #d8d2ca; border-radius: 18px; padding: 1.6rem; text-align: center;
  background: rgba(255, 255, 255, .45);
  margin-bottom: 1rem; transition: border-color .15s, background .15s;
}
.dropzone p { margin: .2rem 0; }
.dropzone.drag { border-color: var(--focus); background: rgba(124, 131, 242, .08); }
.upload-progress { margin-top: 1rem; text-align: left; }
.bar { height: 6px; border-radius: 3px; background: var(--bg-sunk); overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, #f59e7b, #d9669b, #7c83f2); transition: width .2s; }
.upload-status { margin: .5rem 0 0; }
.upload-errors { color: var(--danger); margin: .4rem 0 0; padding-left: 1.2rem; }

.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.admin-thumb { position: relative; display: block; cursor: pointer; border-radius: 12px; overflow: hidden; background: var(--tile-bg); box-shadow: 0 1px 2px rgba(30, 20, 10, .05), 0 6px 16px -8px rgba(60, 40, 20, .25); }
.admin-thumb img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.admin-thumb .thumb-check { position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; z-index: 1; accent-color: var(--danger); }
.admin-thumb:has(.thumb-check:checked) { box-shadow: 0 0 0 3px var(--danger); }
.admin-thumb.is-selected { box-shadow: 0 0 0 2px var(--accent); }
.thumb-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; font-size: .72rem; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.65)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thumb-size { position: absolute; top: 4px; right: 4px; font-size: .65rem; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.55); color: #fff; }
.thumb-badge { position: absolute; top: 5px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; color: #fff; }
.thumb-badge.heart { background: var(--accent); }
.thumb-badge.comment { background: rgba(0,0,0,.6); right: 32px; }
.thumb-badge.rejected { background: var(--danger); }
.cdot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.c-red { background: var(--c-red); } .c-yellow { background: var(--c-yellow); } .c-green { background: var(--c-green); }
.c-blue { background: var(--c-blue); } .c-purple { background: var(--c-purple); }
.thumb-color { position: absolute; bottom: 24px; right: 6px; width: 14px; height: 14px; box-shadow: 0 0 0 2px #fff; }
/* "Neu"-Markierungen */
.new-badge {
  display: inline-block; padding: .1em .55em; border-radius: 999px; vertical-align: middle;
  background: linear-gradient(135deg, #f59e7b, #d9669b); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.flash.news { background: rgba(253, 226, 212, .8); color: var(--fg); }
.gallery-row.has-news { box-shadow: 0 0 0 2px rgba(217, 102, 155, .45), var(--shadow); }
.news-text { color: #b4541f; font-weight: 550; }
.note-item.is-new { background: rgba(253, 226, 212, .55); border-radius: 8px; padding: 2px 6px; }
.admin-thumb.is-new { box-shadow: 0 0 0 3px #d9669b; }
.thumb-new { position: absolute; top: 28px; left: 6px; z-index: 1; }
.table tr.is-new td { background: rgba(253, 226, 212, .4); }
.extra-req { display: grid; gap: .6rem; padding: 1rem 1.1rem; margin-bottom: 1rem; border-radius: var(--radius-sm); background: rgba(99, 102, 241, .07); border: 1px solid rgba(99, 102, 241, .18); }
.extra-req.status-approved, .extra-req.status-declined { background: rgba(241, 238, 233, .6); border-color: transparent; }
.extra-req p { margin: .3rem 0 0; }
.extra-actions { display: grid; gap: .5rem; }
.notify-card .card-head { margin: 0; }
.notify-card p { margin: .2rem 0 0; }
.field-check { align-self: end; margin-bottom: 1.3rem; }
.color-counts { display: flex; gap: 1rem; flex-wrap: wrap; }
.color-count { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
.admin-thumb.is-rejected img { opacity: .35; filter: grayscale(1); }
.sortable .admin-thumb { cursor: grab; }
.sort-ghost { opacity: .35; }
.sort-chosen { box-shadow: 0 0 0 3px var(--accent) !important; }
.sort-hint { margin: 0 0 .6rem; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th, .table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-weight: 500; color: var(--fg-muted); }
.table td.truncate { display: table-cell; max-width: 260px; }

.card.danger { border-color: var(--danger-soft); }