/* domdrop – Basis-Stylesheet. Design-Tokens in :root, BEM-nahe Klassen
   (siehe CLAUDE.md §5). Ein späterer Light-Mode tauscht nur Token-Werte. */

:root {
  /* Dark ist der Standard (auch ohne data-theme bzw. data-theme="dark"). */
  --bg: #0f1115;
  --card: #1a1d24;
  --card-hi: #1b1f29;
  --line: #2a2e38;
  --txt: #e8eaf0;
  --mut: #8b90a0;
  --acc: #ff6a4f;
  --acc-soft: rgba(79, 140, 255, 0.14);
  --danger: #c0392b;

  --radius: 12px;
  --radius-sm: 8px;
  --gap: 16px;
  --pad: 28px;
  --appbar-h: 56px;

  /* Tiefe & Overlay */
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);
  --overlay: rgba(8, 10, 14, 0.72);

  /* Bewegung – zentral gesteuert, mit Reduced-Motion-Fallback (s. u.) */
  --dur-fast: 0.12s;
  --dur: 0.22s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Scrollbalken – einheitlich für alle scrollbaren Bereiche (s. u.) */
  --scroll-thumb: #3a3f4d;
  --scroll-thumb-hover: #4a5160;

  /* Shimmer-Sweep: hellere Strähne über dem Kartenhintergrund */
  --shimmer-hi: #262b36;
}

/* Light-Theme: nur Token-Werte tauschen (CLAUDE.md §5). „Automatisch" wird beim
   Laden per Inline-Skript zu light/dark aufgelöst, daher genügen zwei Sätze. */
html[data-theme="light"] {
  --bg: #f5f6f8;
  --card: #ffffff;
  --card-hi: #eef0f4;
  --line: #e3e5ea;
  --txt: #1a1d24;
  --mut: #5a5f6b;
  --acc: #dd6a2f;
  --acc-soft: rgba(47, 107, 221, 0.12);
  --shadow: 0 6px 20px rgba(20, 30, 50, 0.10);
  --shadow-lg: 0 18px 50px rgba(20, 30, 50, 0.18);
  --overlay: rgba(20, 24, 32, 0.45);
  --scroll-thumb: #c2c6cf;
  --scroll-thumb-hover: #a6abb6;
  --shimmer-hi: #e3e5ea;
}

* { box-sizing: border-box; }

/* Sichtbarer, konsistenter Fokusring für Tastaturnutzung */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* Touch: kein 300ms-Tap-Delay und kein grauer Tap-Blitz – Taps reagieren sofort
   (verhindert das „braucht zwei Taps"-Gefühl auf Mobilgeräten). manipulation
   erlaubt weiter Scrollen/Zoom, unterbindet nur das Doppeltipp-Verzögern. */
:where(a, button, label, summary, input, [role="button"], .tile, .tile__thumb, .pres-tile) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Einheitliche, dezente Scrollbalken für ALLE scrollbaren Bereiche – über
   Tokens thembar (dark/light). Firefox via scrollbar-* , WebKit/Blink via
   ::-webkit-scrollbar. Bewusst global, damit kein Bereich die OS-Default-Leiste zeigt. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 999px;
  /* Rand sorgt für „schwebenden" Daumen mit Abstand zur Spurkante */
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* Horizontales Scrollen ist nirgends gewollt. `clip` unterbindet es seitenweit
   (auch bei minimalem Subpixel-/Overlay-Überstand), ohne – anders als `hidden` –
   einen Scroll-Container zu erzeugen, damit `position: sticky` (z. B. die
   Galerie-Appbar) weiter funktioniert. */
html { overflow-x: clip; }

body {
  margin: 0;
  overflow-x: clip;
  font: 15px/1.5 system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--txt);
}

/* Kopfzeile */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--appbar-h);
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line);
}
.topbar__heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topbar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.topbar__logo img {
  height: 30px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}
html[data-theme="light"] .topbar__logo img {
  filter: brightness(0);
}
.topbar__sub { color: var(--mut); font-size: 13px; }
.topbar__spacer { flex: 1; }
.topbar__back {
  color: var(--acc);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.topbar__back:hover { text-decoration: underline; }
.topbar__logout { display: inline-flex; margin: 0; }
.topbar__user { color: var(--mut); font-size: 13px; }
.topbar__brand {
  font-size: 14px;
  font-weight: 500;
  color: var(--txt);
  letter-spacing: .01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Breadcrumb-Pfad (Navigation durch Untergalerien) */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mut);
}
.breadcrumbs__crumb {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mut);
  text-decoration: none;
}
.breadcrumbs__crumb:hover { color: var(--txt); }
.breadcrumbs__sep { color: var(--mut); opacity: .5; }

/* Prominenter 2-Button-Umschalter „Kundenmodus" im Einstellungsmenü (oben, über
   den Tabs). Legt fest, welche Ansicht Besucher beim Öffnen sehen. */
.settings__mode {
  display: grid;
  gap: 8px;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--line);
}
.settings__mode-label { font-size: 13px; font-weight: 600; color: var(--mut); }

.mode-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
}
.mode-toggle--block { display: flex; width: 100%; }
.mode-toggle--block .mode-toggle__btn { flex: 1; text-align: center; }
.mode-toggle__btn {
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mut);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.mode-toggle__btn.is-active { background: var(--acc); color: #fff; }
.mode-toggle__btn:not(.is-active):hover { color: var(--txt); background: var(--acc-soft); }
/* Variante mit Symbol über dem Label (z. B. Layout-Umschalter). */
.mode-toggle--icons .mode-toggle__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 6px;
  font-size: 13px;
}
.mode-toggle__ic { display: inline-flex; }
.mode-toggle__ic svg { display: block; }

/* Abschnittsüberschrift */
.section-title {
  margin: 28px 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Panel (z. B. "Galerie anlegen") */
.panel {
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel__label { display: block; margin-bottom: 8px; font-size: 13px; color: var(--mut); }
.panel__row { display: flex; gap: 10px; }

.input {
  flex: 1;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--txt);
  font: inherit;
}
.input:focus { outline: none; border-color: var(--acc); }
.input--block { display: block; width: 100%; }

.btn {
  display: inline-block;
  padding: 10px 16px;
  background: var(--acc);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn--block { display: block; width: 100%; text-align: center; }

.container--narrow { max-width: 520px; }

/* Login-Seite */
.body--centered { display: flex; flex-direction: column; min-height: 100vh; }
.topbar--borderless { border-bottom: none; }
.login-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
}
.login-form {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-form .panel__label { margin-bottom: 0; }
.login-form .btn--block { margin-top: 6px; }
.login-form__logo-link { display: flex; justify-content: center; margin-bottom: 28px; }
.login-form__logo { height: 36px; width: auto; display: block; filter: brightness(0) invert(1); }
html[data-theme="light"] .login-form__logo { filter: brightness(0); }

/* Werkzeugleiste (Galerie anlegen + Sync nebeneinander) */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}
.panel--grow { flex: 1 1 320px; }
.panel--inline { margin: 18px 0; padding: 12px; }

/* Kompakte Admin-Leiste: Live-Suche + „+ Neue Galerie" über der Galerie-Übersicht */
.admin-tools {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.admin-tools__add  { flex: none; white-space: nowrap; }
.admin-tools__sort-wrap { position: relative; flex: none; min-width: 220px; display: flex; }
.admin-tools__sort { flex: 1; min-width: 0; }
/* Sortier-Symbol nur in der kompakten Mobilvariante (s. 640px-Block). */
.admin-tools__sort-icon { display: none; }

.btn--ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--txt);
}
.btn--ghost:hover { border-color: var(--acc); filter: none; }
.btn--danger { background: var(--danger); }
.btn--small { padding: 6px 12px; font-size: 13px; }

.form-error { margin: 10px 0 0; color: #ff6b6b; font-size: 13px; }

/* Galerie-Liste (Admin & Untergalerien) */
.gallery-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gallery-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.gallery-list__link {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--txt);
  text-decoration: none;
}
.gallery-list__link:hover .gallery-list__name { color: var(--acc); }
.gallery-list__name { font-weight: 600; }
.gallery-list__meta { color: var(--mut); font-size: 13px; }
.gallery-list__hash { color: var(--mut); font-size: 12px; font-family: ui-monospace, monospace; }

/* Layout */
.container {
  margin: 0 auto;
  padding: 24px var(--pad) 80px;
}

/* --- Galerie-Rahmen: Kopfleiste oben + feste linke Sidebar (Vorbild Picdrop) -- */

/* Durchgehende Kopfleiste (Breadcrumbs links, Profil rechts). */
.appbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--appbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--pad);
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.appbar__crumbs { flex: 1; min-width: 0; }
.appbar__right { display: flex; align-items: center; gap: 12px; }
.breadcrumbs__crumb--current { font-weight: 600; color: var(--txt); }

/* Profil-Menü (Avatar + Dropdown, reines <details>, kein JS). */
.usermenu { position: relative; }
.usermenu__avatar {
  list-style: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.usermenu__avatar::-webkit-details-marker { display: none; }
.usermenu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 50;
}
.usermenu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--txt);
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.usermenu__item:hover { background: var(--card-hi, #1b1f29); }
.usermenu__label {
  padding: 6px 10px 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mut);
}

/* Segmentierter Theme-Umschalter (Dunkel/Hell/Auto). */
.theme-toggle {
  display: flex;
  gap: 4px;
  margin: 2px 6px 8px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.settings__mode .theme-toggle { margin: 0; }
.theme-toggle__btn {
  flex: 1;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--mut);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.theme-toggle__btn.is-active { background: var(--acc); color: #fff; }

.page-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w, 280px) 1fr;
  align-items: start;
}
.sidebar {
  position: sticky;
  top: var(--appbar-h);
  height: calc(100dvh - var(--appbar-h));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px var(--pad);
  border-right: 1px solid var(--line);
  background: var(--bg);
}
.sidebar__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sidebar__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
}
/* Werkzeug-Reihe: Settings · Vorschau · Teilen (Icon über Label). */
.sidebar__tools { display: flex; gap: 8px; }
.sidebar__tool {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--txt);
  font: inherit;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sidebar__tool:hover { background: var(--card-hi, #1b1f29); border-color: var(--acc); }
.sidebar__tool-ic { font-size: 16px; }

.sidebar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--txt);
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sidebar__btn:hover { background: var(--card-hi, #1b1f29); border-color: var(--acc); }
.sidebar__btn--accent {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
}
.sidebar__btn--accent:hover { filter: brightness(1.06); background: var(--acc); }

.sidebar__section { display: flex; flex-direction: column; gap: 10px; }
.sidebar__heading {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 600;
}
.sidebar__field-label { font-size: 13px; color: var(--mut); }

/* Anordnung: Select + Richtungs-Umschalter. */
.sort-row { display: flex; gap: 8px; align-items: stretch; }
.sort-row .input { flex: 1; min-width: 0; }
.sort-dir {
  flex: 0 0 auto;
  width: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--txt);
  cursor: pointer;
}
.sort-dir[aria-pressed="true"] { border-color: var(--acc); color: var(--acc); }

/* Filterleiste in der schmalen Sidebar: vertikal umbrechen statt eine Zeile. */
.filterbar--side { flex-wrap: wrap; }
.filterbar--side .filterbar__spacer { display: none; }

.main-area { min-width: 0; }

@media (max-width: 860px) {
  .page-layout { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* Schmaleres Overlay (Teilen) */
.settings__panel--narrow { max-width: 520px; }
.share-qr { display: grid; place-items: center; padding: 8px 0 14px; }

/* Dropzone */
.dropzone {
  margin-top: 32px;
  padding: 40px;
  border: 2px dashed var(--line);
  border-radius: 14px;
  text-align: center;
  color: var(--mut);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.dropzone strong { color: var(--txt); }
.dropzone--over,
.is-dragging-over .dropzone {
  border-color: var(--acc);
  background: rgba(79, 140, 255, 0.06);
  color: var(--txt);
}

/* Galerie-weiter Drag-over-Rahmen: zeigt dem Nutzer, dass überall abgelegt
   werden kann – pointer-events:none, damit er Kacheln nicht verdeckt. */
.is-dragging-over::after {
  content: '';
  position: fixed;
  inset: 0;
  border: 2px dashed var(--acc);
  background: rgba(79, 140, 255, 0.04);
  pointer-events: none;
  z-index: 9000;
}

/* Bildraster */
.grid {
  display: grid;
  /* min(100%, 280px): die Mindest-Spaltenbreite überschreitet nie den Container,
     sonst entsteht auf sehr schmalen Phones horizontales Scrollen. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--gap);
  /* Flackerfrei: das (per JS gefüllte) Raster bleibt unsichtbar, bis das Layout
     einmal vollständig steht, und wird dann sanft eingeblendet (.is-in) – so ist
     der kurze Wechsel Raster->Masonry beim Laden nie sichtbar. Gleiches Muster
     wie bei Overlays/Toasts (requestAnimationFrame + .is-in). */
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.grid.is-in { opacity: 1; }
/* Untergalerie-Abschnitt zusammen mit dem Raster einblenden (sonst sitzt er kurz
   unter dem noch leeren Raster und springt beim Befüllen nach unten). */
.subnav-section { opacity: 0; transition: opacity var(--dur) var(--ease); }
.subnav-section.is-in { opacity: 1; }
/* Raster-Stil: quadratische Kacheln, das Bild wird vollständig eingepasst
   (contain) – je nach Format mit Rändern oben/unten oder links/rechts, statt
   zu beschneiden. Die Ränder tragen die Kachelfarbe. */
.grid--clean .tile__thumb { background-size: contain; }
/* Masonry-Stil: Spalten nach Bildhöhe (Höhe je Kachel via JS aus den Bildmaßen) */
.grid--masonry {
  display: block;
  column-width: 320px;
  column-gap: var(--gap);
}
.grid--masonry .tile {
  break-inside: avoid;
  margin-bottom: var(--gap);
}
/* Listen-Stil: eine Zeile je Bild (Vorschau links, Infos + Review rechts) */
.grid--list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.grid--list .tile {
  display: grid;
  grid-template-columns: 140px 1fr;
  grid-template-areas: "thumb meta" "thumb review";
  align-items: stretch;
}
.grid--list .tile__thumb {
  grid-area: thumb;
  aspect-ratio: auto;
  height: 100%;
  min-height: 88px;
}
.grid--list .tile__meta { grid-area: meta; align-self: center; }
.grid--list .tile__review { grid-area: review; align-self: center; border-top: 0; }

/* Gruppierung („Gruppieren nach"): volle-Breite-Unterüberschrift zwischen den
   Kacheln. Funktioniert in allen drei Layouts: Raster (Grid-Spalte 1/-1), Ziegel
   (column-span: all bricht den Spaltenfluss) und Liste (normaler Flex-Block). */
.grid__group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 8px 0 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
}
.grid__group:first-child { margin-top: 0; }
.grid__group-title { color: var(--txt); }
.grid__group-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--mut);
  background: var(--card-hi);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}
/* Raster (Grid): über die volle Zeilenbreite, erzwingt einen Zeilenumbruch. */
.grid--clean.grid--grouped .grid__group { grid-column: 1 / -1; }
/* Ziegel (CSS-Spalten): über alle Spalten, der Fluss setzt darunter neu an. */
.grid--masonry.grid--grouped .grid__group {
  column-span: all;
  break-inside: avoid;
}

/* Raster (clean) & Ziegel (masonry): Review-Steuerung liegt als Hover-Overlay
   über dem Bild. Der Dateiname sitzt außerhalb des Bildrahmens darunter (statisch,
   immer sichtbar). Liste behält die seitliche Leiste. */
:is(.grid--clean, .grid--masonry) .tile__review {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  border-top: 0;
  pointer-events: none;
  padding: 16px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}
/* Bewusst nur :hover (Maus) und .tile--focused (Tastatur-Navigation) – KEIN
   :focus-within, damit die Optionen nach einem Klick beim Weg-Hovern wieder
   verschwinden und nicht „angepinnt" bleiben. */
:is(.grid--clean, .grid--masonry) .tile:hover .tile__review,
:is(.grid--clean, .grid--masonry) .tile--focused .tile__review {
  opacity: 1;
}
/* Nur die Review-Leiste wird auf Hover klickbar (Dateiname bleibt pointer-none). */
:is(.grid--clean, .grid--masonry) .tile:hover .tile__review,
:is(.grid--clean, .grid--masonry) .tile--focused .tile__review {
  pointer-events: auto;
}
/* Über dem Bild müssen die Markierungen ohne Scrim-Raten lesbar sein: Chips,
   „merken" und die Ampel-Flags sitzen auf soliden „Glas"-Pillen; die Flags sind
   voll deckend (Zustand über einen weißen Ring statt über Opacity). */
:is(.grid--clean, .grid--masonry) .tile__review .chip,
:is(.grid--clean, .grid--masonry) .tile__review .flags,
:is(.grid--clean, .grid--masonry) .tile__review .tile__pick {
  background: rgba(18, 20, 26, 0.78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 999px;
}
:is(.grid--clean, .grid--masonry) .tile__review .chip { border-color: transparent; color: #fff; }
:is(.grid--clean, .grid--masonry) .tile__review .chip.is-on { color: #ff8a8a; }
:is(.grid--clean, .grid--masonry) .tile__review .tile__pick { color: #fff; padding: 4px 8px; }
:is(.grid--clean, .grid--masonry) .tile__review .tile__pick.is-on { color: #ffd34d; }
:is(.grid--clean, .grid--masonry) .tile__review .flags { padding: 5px 8px; gap: 7px; }
:is(.grid--clean, .grid--masonry) .tile__review .flag:not(.is-on) {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}
:is(.grid--clean, .grid--masonry) .tile__review .flag.is-on {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(18, 20, 26, 0.78), 0 0 0 4px #fff;
}
/* Raster & Masonry: Dateiname außerhalb des Bildrahmens – kein Overlay.
   overflow:visible am Tile erlaubt, dass der Name unter dem Bild steht;
   border + border-radius + overflow:hidden zieht auf den Thumb. */
.grid--clean .tile,
.grid--masonry .tile {
  overflow: visible;
  background: transparent;
  border: none;
  border-radius: 0;
}
.grid--clean .tile__thumb,
.grid--masonry .tile__thumb {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Fokus- und Auswahlring jetzt am Thumb statt am äußeren Tile. */
.grid--clean .tile--focused .tile__thumb,
.grid--masonry .tile--focused .tile__thumb,
.grid--clean .tile--selected .tile__thumb,
.grid--masonry .tile--selected .tile__thumb {
  border-color: var(--acc);
  box-shadow: 0 0 0 2px var(--acc);
}
:is(.grid--clean, .grid--masonry) .tile__meta {
  position: static;
  opacity: 1;
  background: none;
  padding: 5px 4px 2px;
  text-align: center;
  pointer-events: none;
}
:is(.grid--clean, .grid--masonry) .tile__name { color: var(--mut); }

@media (max-width: 480px) {
  .grid--list .tile { grid-template-columns: 96px 1fr; }
}

/* Galerie-Übersicht als Cover-Cards (Admin-Übersicht + Untergalerien) */
.gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--gap);
}
.gallery-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.gallery-card:hover { border-color: #3a3f4d; }
.gallery-card__link { display: block; color: inherit; text-decoration: none; }
.gallery-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  
  /* Runde Oberkanten, da die Karte selbst kein overflow:hidden mehr hat
     (sonst würde das Dreipunkt-Menü abgeschnitten). */
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.gallery-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Favoriten-Stern (Übersicht): nur sichtbar, wenn die Karte favorisiert ist. */
.gallery-card__fav {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: none;
  font-size: 18px;
  line-height: 1;
  color: #f5c518;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.gallery-card.is-favorite .gallery-card__fav { display: block; }

/* Ablauf-Badge (Übersicht): zeigt verbleibende Tage bei Galerien, die bald
   ablaufen. Oben links auf dem Thumbnail. Die Hintergrundfarbe kommt je Stufe
   inline aus der globalen Konfiguration (siehe admin.php / ExpiryBadgeConfig). */
.gallery-card__expiry {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: rgba(20, 24, 33, 0.78);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
/* Wenn ein Ablauf-Badge oben links sitzt, weicht der Favoriten-Stern nach
   unten links aus, damit sich beide nicht überlagern. */
.gallery-card__expiry + .gallery-card__fav {
  top: auto;
  bottom: 8px;
}

/* Platzhalter, wenn eine Galerie (noch) kein Galeriebild/Bild hat (z. B. leerer
   Ordner) – verhindert ein gebrochenes <img> und zeigt ein cleanes Bild-Symbol. */
.thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--card-hi, #1b1f29);
}
.thumb-placeholder::before {
  content: "";
  width: 34%;
  max-width: 48px;
  aspect-ratio: 1;
  background: var(--muted, #9aa3b2);
  opacity: 0.45;
  -webkit-mask: var(--thumb-placeholder-icon) center / contain no-repeat;
  mask: var(--thumb-placeholder-icon) center / contain no-repeat;
}
:root {
  --thumb-placeholder-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='1.5'/%3E%3Ccircle cx='8.5' cy='10' r='1.5'/%3E%3Cpath d='M4 16.5l4.5-4 3 3 4-4 4.5 4.5'/%3E%3C/svg%3E");
}
.gallery-card__body { display: block; padding: 10px 12px; }
.gallery-card__name {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gallery-card__meta { display: block; color: var(--mut); font-size: 13px; }
/* Container sitzt oben rechts in der Kachel; kombinierte Selektor-Spezifität,
   damit das absolute Positionieren nicht von .card-menu (relative) gekippt wird. */
.card-menu.gallery-card__actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
}

/* Dreipunkt-Menü auf Galerie-Karten (Link kopieren / Löschen) */
.card-menu { position: relative; }
.card-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  cursor: pointer;
  backdrop-filter: blur(4px);
  /* Nur beim Hover über der Kachel sichtbar (sowie wenn offen / per Tastatur fokussiert). */
  opacity: 0;
  transition:
    opacity var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}
.gallery-card:hover .card-menu__toggle,
.card-menu.is-open .card-menu__toggle,
.card-menu__toggle:focus-visible { opacity: 1; }
.card-menu__toggle:hover,
.card-menu.is-open .card-menu__toggle { background: rgba(0, 0, 0, 0.75); border-color: rgba(255, 255, 255, 0.32); }
.card-menu__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  /* Aufklapp-Animation: standardmäßig eingeklappt, oben rechts verankert. */
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    visibility 0s linear var(--dur-fast);
}
.card-menu.is-open .card-menu__list {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.card-menu__item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  font: inherit;
}
.card-menu__item:hover { background: rgba(255, 255, 255, 0.06); }
.card-menu__item--danger { color: var(--danger, #e5484d); }

/* Schwebendes Kontextmenü (Kachel-Dreipunktmenü, ui.js openMenu).
   Position (left/top) wird per JS im Viewport gesetzt → position: fixed. */
.menu {
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  text-align: left;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  font: inherit;
}
.menu__item:hover { background: var(--card-hi, rgba(255, 255, 255, 0.06)); }
.menu__item--danger { color: var(--danger, #e5484d); }
.menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  color: var(--muted, #9aa3b2);
}
.menu__item--danger .menu__icon { color: var(--danger, #e5484d); }
.menu__label { flex: 1; }

/* Titelbild-Header der Galerie (Präsentation) */
.cover {
  position: relative;
  height: clamp(180px, 38vh, 420px);
  overflow: hidden;
}
.cover__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.05));
}
.cover__title {
  position: absolute;
  left: var(--pad);
  bottom: 18px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
/* Titelbild entfernen (nur Admin): dezenter X-Button oben rechts auf dem Cover. */
.cover__remove {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 10, 14, 0.55);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--dur) var(--ease);
}
.cover__remove:hover { background: rgba(8, 10, 14, 0.8); }

/* Footer (Branding: Logo, Text, Rechts-/Social-Links) */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 0 auto;
  padding: 24px var(--pad) 48px;
  border-top: 1px solid var(--line);
  color: var(--mut);
  font-size: 13px;
}
.site-footer__logo { max-height: 40px; width: auto; }
.site-footer__links { display: inline-flex; flex-wrap: wrap; gap: 8px 16px; margin-left: auto; }
.site-footer__links a { color: var(--mut); text-decoration: none; }
.site-footer__links a:hover { color: var(--acc); }
/* Footer als alleinstehender Seitenabschluss (Fehlerseite): zentriert, ohne Übersicht. */
.site-footer--standalone {
  max-width: 760px;
  justify-content: center;
  text-align: center;
}

/* Besucherfreundliche Fehler-/Hinweisseite (z. B. „Nicht verfügbar"). */
.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
  padding: var(--pad);
}
.error-card {
  width: min(100%, 460px);
  margin: auto auto 0;
  padding: clamp(28px, 6vw, 48px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.error-card__mark {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--acc);
  margin-bottom: 14px;
}
.error-card__title {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
}
.error-card__message {
  margin: 0;
  color: var(--mut);
  line-height: 1.55;
}
.error-card__contact {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--mut);
  font-size: .92rem;
  line-height: 1.6;
}
.error-card__link {
  color: var(--acc);
  text-decoration: none;
  font-weight: 600;
}
.error-card__link:hover { text-decoration: underline; }
/* Footer rückt ans Seitenende, Karte bleibt vertikal mittig. */
.error-page .site-footer--standalone { margin-top: auto; }

/* Dark/Light-Logo im Footer – passendes Logo je nach Theme einblenden */
html:not([data-theme="light"]) .logo--light { display: none; }
html[data-theme="light"]       .logo--dark  { display: none; }

/* Branding-Formular (Admin-Übersicht) */
.branding__logo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.branding__logo { max-height: 48px; width: auto; padding: 4px; border-radius: var(--radius-sm); background: var(--card-hi); border: 1px solid var(--line); }
/* Vorschau im Admin immer auf passendem Hintergrund zeigen */
.branding__logo--dark-preview  { background: #1a1d24; }
.branding__logo--light-preview { background: #f5f6f8; }
#branding-links { margin-bottom: 8px; display: grid; gap: 8px; }
.branding-link { display: flex; gap: 8px; }
.branding-link__label { flex: 0 0 32%; }
.branding-link__url { flex: 1; }
#branding-form .field + .field { margin-top: 14px; }
#branding-add-link { margin-bottom: 14px; }

/* Ablauf-Badge-Konfiguration: eine Zeile pro Stufe (Schwelle + Farbe). */
.expiry-tier {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.expiry-tier__lead,
.expiry-tier__unit { color: var(--muted, #8b93a3); font-size: 13px; }
.expiry-tier__days { flex: 0 0 80px; }
.expiry-tier__color {
  flex: 0 0 40px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--border, #2a2f3a);
  border-radius: var(--radius, 8px);
  background: transparent;
  cursor: pointer;
}
.expiry-tier [data-remove-tier] { margin-left: auto; }

/* Datei-Auswahl – gestylter Wrapper für input[type="file"] */
.file-input {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  overflow: hidden;
  cursor: pointer;
  max-width: 100%;
  transition: border-color var(--dur-fast) var(--ease);
}
.file-input:focus-within {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
.file-input input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.file-input__btn {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--card-hi);
  border-right: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  color: var(--txt);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
.file-input:hover .file-input__btn { background: var(--line); }
.file-input__name {
  padding: 7px 12px;
  font-size: 13px;
  color: var(--mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tile {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.tile__thumb {
  position: relative;
  display: block;
  aspect-ratio: 1;
  /* Grundfarbe wie die Schimmer-Basis (statt Schwarz) → nahtloser Übergang,
     solange die Vorschau noch nicht geladen ist. */
  background: var(--card) center / cover no-repeat;
}

/* Platzhalter, solange die Vorschau noch erzeugt/geladen wird (Schimmer-Sweep).
   Gilt für Raster-Kacheln wie für server-gerenderte Titelbilder (<img>). */
.is-loading {
  background-image: linear-gradient(
    100deg,
    var(--card) 30%,
    var(--shimmer-hi) 50%,
    var(--card) 70%
  );
  background-size: 200% 100%;
  animation: dd-shimmer 1.25s ease-in-out infinite;
}
/* Geladene Vorschau sanft einblenden. */
.tile__thumb.is-loaded { animation: dd-fade-in var(--dur) var(--ease); }

/* Play-Overlay über einer Video-Vorschau (Poster) – zentriert, dezenter Kreis. */
.tile__play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.tile__play svg {
  width: 22px;
  height: 22px;
  color: #fff;
  padding: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

/* Crossfade-Schicht beim Umschwenken auf die Wasserzeichen-Variante: liegt über
   dem bisherigen Hintergrund (unter den Badges, z-index 3) und wird sanft
   eingeblendet – das alte Bild bleibt darunter, bis das neue voll da ist. */
.tile__thumb-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: inherit; /* übernimmt cover/contain des jeweiligen Layouts */
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.tile__thumb-fade.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tile__thumb-fade { transition: none; }
}
/* Shimmer-Override: höhere Spezifität als .grid--clean .tile__thumb, damit der
   Sweep auch im contain-Modus über die volle Kachel läuft (gleiche Spezifität 0,2,0,
   aber später im Sheet → gewinnt). Fällt weg, sobald is-loading entfernt wird. */
.tile__thumb.is-loading { background-size: 200% 100%; }

/* Server-gerenderte Vorschauen (<img>, z. B. Galerie-Karten & Titelbilder):
   solange sie nachgeladen werden, das Bild ausblenden – der Schimmer läuft auf
   dem umschließenden Element, sodass kein nativer „kaputtes Bild"-Rahmen über
   der Animation erscheint. Nach dem Laden sanft einblenden. */
.gallery-card__img.is-loading,
.gallery-card__img.is-error,
.cover__img.is-loading,
.cover__img.is-error { opacity: 0; }
.gallery-card__img.is-loaded,
.cover__img.is-loaded { animation: dd-fade-in var(--dur) var(--ease); }
/* Vorschau dauerhaft nicht verfügbar: dezentes Symbol statt leerer Fläche. */
.is-error {
  background-image: none;
  background-color: var(--card);
}
.is-error::after {
  content: '⛌';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--mut);
  font-size: 26px;
  opacity: 0.4;
}

@keyframes dd-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* Typ-Kachel für Dateien ohne Bildvorschau (Video; PDF-Fallback). Icon + Label
   zentriert auf neutralem Grund. Gilt für Raster- (.tile__thumb) und
   Präsentations-Kacheln (.pres-tile) – beide tragen .is-type. */
.is-type {
  background-image: none;
  background-color: var(--card);
}
.type-tile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--mut);
}
.type-tile__label {
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 600;
}
/* Kleines Ecken-Label (z. B. „PDF") über einer echten Vorschau. */
.type-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(18, 20, 26, 0.78);
  backdrop-filter: blur(3px);
  pointer-events: none;
}


/* Sterne aus Metadaten (unten links auf dem Bild) */
.tile__rating {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: 13px;
  color: #ffd34d;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
}

/* „Merken"-Stern – sitzt jetzt inline in der Review-Leiste (neben den Flags). */
.tile__pick {
  border: none;
  background: transparent;
  color: var(--mut);
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  transition: color 0.15s;
}
.tile__pick:hover { color: var(--txt); }
.tile__pick.is-on { color: #ffd34d; }

/* Review-Leiste unter dem Bild */
.tile__review {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--mut);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.chip:hover { color: var(--txt); }
.chip__count { font-variant-numeric: tabular-nums; }
.chip--like.is-on { color: #ff6b6b; border-color: #ff6b6b; }

.flags { display: inline-flex; gap: 5px; }
.flag {
  width: 13px;
  height: 15px;
  border: none;
  padding: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Crect x='0' y='0' width='2.5' height='16' rx='1.25'/%3E%3Crect x='2.5' y='1.5' width='9' height='8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Crect x='0' y='0' width='2.5' height='16' rx='1.25'/%3E%3Crect x='2.5' y='1.5' width='9' height='8'/%3E%3C/svg%3E") center/contain no-repeat;
  cursor: pointer;
  opacity: 0.45;
  transition: 0.15s;
}
/* Hover NICHT über die Opacity anzeigen – sonst sieht eine inaktive Flagge beim
   Überfahren (oder bei klebendem Touch-Hover nach dem Abschalten) wie aktiv aus.
   Der An/Aus-Status steckt allein in der Opacity (0.45 / 1); Hover gibt nur einen
   dezenten Zoom als Affordanz. */
.flag:hover { transform: scale(1.18); }
.flag.is-on {
  opacity: 1;
  filter: drop-shadow(0 0 1.5px var(--bg)) drop-shadow(0 0 2.5px currentColor);
}
.flag--red { background: #e74c3c; color: #e74c3c; }
.flag--yellow { background: #f1c40f; color: #f1c40f; }
.flag--green { background: #2ecc71; color: #2ecc71; }

/* Filterleiste über dem Raster (Auswahl-Filter, siehe filters.js) */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--gap);
}
.filterbar__spacer { flex: 1; }
.filterbar__count { font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--mut);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.filter-chip:hover { color: var(--txt); border-color: var(--acc); }
.filter-chip.is-on { color: var(--txt); border-color: var(--acc); background: var(--acc-soft); }
.filter-flag { width: 30px; padding: 0; }
.filter-flag::before {
  content: '';
  width: 13px;
  height: 15px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Crect x='0' y='0' width='2.5' height='16' rx='1.25'/%3E%3Crect x='2.5' y='1.5' width='9' height='8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Crect x='0' y='0' width='2.5' height='16' rx='1.25'/%3E%3Crect x='2.5' y='1.5' width='9' height='8'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease);
}
.filter-flag:hover::before, .filter-flag.is-on::before { opacity: 1; }
.filter-flag--red::before { background: #e74c3c; }
.filter-flag--yellow::before { background: #f1c40f; }
.filter-flag--green::before { background: #2ecc71; }
.filter-pick.is-on { color: #ffd34d; }
.filter-like.is-on { color: #ff6b6b; border-color: #ff6b6b; }

/* Aggregierte Besucher-Auswahl auf der Inhaber-Kachel (read-only). Bleibt – auch
   in Masonry – dauerhaft sichtbar (nicht nur beim Hover) und voll deckend, damit
   der Inhaber die Auswahl auf einen Blick erkennt (z-index über dem Overlay). */
/* Im Hover-/Fokus-Zustand (tile__review sichtbar) ausblenden, da sich beide
   am unteren Bildrand überlagern. */
:is(.grid--clean, .grid--masonry) .tile:hover .tile__agg,
:is(.grid--clean, .grid--masonry) .tile--focused .tile__agg { display: none; }

.tile__agg {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: inline-flex;
  gap: 5px;
  padding: 4px 7px;
  border-radius: var(--radius-sm);
  background: #14161c;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.tile__agg-flag, .tile__agg-pick {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.tile__agg-flag::before {
  content: '';
  width: 13px;
  height: 16px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Crect x='0' y='0' width='2.5' height='16' rx='1.25'/%3E%3Crect x='2.5' y='1.5' width='9' height='8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Crect x='0' y='0' width='2.5' height='16' rx='1.25'/%3E%3Crect x='2.5' y='1.5' width='9' height='8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tile__agg-flag--red::before { background: #e74c3c; }
.tile__agg-flag--yellow::before { background: #f1c40f; }
.tile__agg-flag--green::before { background: #2ecc71; }
.tile__agg-pick { color: #ffd34d; }

/* Wasserzeichen-Statuszeile im Einstellungs-Drawer (Galerie-Summe). */
.wm-status {
  margin: 2px 0 4px;
  font-size: 12px;
  color: var(--mut);
}

/* Kommentare */
.comments { padding: 0 10px 10px; }
.comments__list { display: grid; gap: 6px; margin-bottom: 8px; }
.comment { font-size: 12px; line-height: 1.4; }
.comment__author { color: var(--acc); font-weight: 600; margin-right: 6px; }
.comment__body { color: var(--txt); }
.comments__form { display: flex; gap: 6px; }
.comments__form .input { padding: 6px 8px; font-size: 12px; }

/* Admin-Toggles */
.toggles { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--txt); }
.tile__meta { padding: 8px 10px; font-size: 12px; }
.tile__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mut); }

.tile__actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3; /* über dem Dateiname-Overlay (z-index 2), damit klickbar */
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: 0.15s;
}
.tile:hover .tile__actions { opacity: 1; }
.tile__action {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.tile__action--del:hover { background: var(--danger); }

/* Stapel-Auswahl: „+"-Button oben links (Picdrop-Vorbild). Sichtbar auf Hover
   oder dauerhaft, sobald die Kachel ausgewählt ist. Das Glyph (+ / ✓) setzt JS. */
.tile__select {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tile:hover .tile__select,
.tile__select.is-on,
.tile--selected .tile__select { opacity: 1; }
.tile__select:hover,
.tile__select.is-on { background: var(--acc); }

/* Informativer Kommentar-Zähler oben links neben dem Auswahl-Button (kein Klick). */
.tile__comment-badge {
  position: absolute;
  top: 8px;
  left: 44px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  padding: 0 8px 0 6px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  pointer-events: none;
}
.tile__comment-badge svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Aktionsleiste über dem Raster: „Alle markieren" + „Alle herunterladen". */
.gallery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--gap);
}
.gallery-actions[hidden] { display: none; } /* sonst überstimmt display:flex hidden */

/* Fixe Auswahl-Leiste am unteren Rand (erscheint, sobald etwas gewählt ist). */
.selbar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 45; /* über dem Inhalt, unter Lightbox(50)/Toast(60)/Modal(70) */
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(1080px, calc(100vw - 32px));
  padding: 10px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
}
.selbar[hidden] { display: none; }
.selbar__count {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--acc);
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Über der Inklusiv-Anzahl: Kreis dezent umranden (kein Fehler – kostet nur extra). */
.selbar__count.is-over { box-shadow: 0 0 0 2px var(--acc-soft); }
/* Vorschauen + Bildunterschrift als Spalte (Unterschrift sitzt unter den Minis). */
.selbar__media { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.selbar__previews { display: inline-flex; align-items: center; gap: 6px; }
.selbar__preview {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--bg) center / cover no-repeat;
  border: 1px solid var(--line);
}
.selbar__more { font-size: 12px; color: var(--mut); }
/* Bildunterschrift unter den Vorschauen: „von Y" bzw. „von Y · Preis". */
.selbar__caption {
  font-size: 13px;
  font-weight: 600;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.selbar__caption.is-over { color: var(--acc); }
.selbar__spacer { flex: 1; }
.selbar__actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.selbar__actions .btn { display: inline-flex; align-items: center; gap: 6px; }
/* Icon-Buttons in der Leiste: quadratisch, nur Symbol (Tooltip via title). */
.selbar__icon { padding: 7px; line-height: 0; }
.selbar__icon svg { width: 16px; height: 16px; display: block; }
.selbar__export-text {
  width: 100%;
  resize: vertical;
  font-family: ui-monospace, monospace;
  font-size: 13px;
}
@media (max-width: 640px) {
  .selbar { flex-wrap: wrap; border-radius: var(--radius); }
  .selbar__previews { display: none; }
}

/* Auswahl-Pakete (Sidebar): gespeicherte, galerie-weit geteilte Auswahlen. */
.selections { display: flex; flex-direction: column; gap: 6px; }
.selection-empty { color: var(--mut); font-size: 13px; margin: 0; }
.selection-item {
  display: flex;
  align-items: stretch;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  overflow: hidden;
}
.selection-item:hover { border-color: var(--acc); }
.selection-item__open {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  background: none;
  border: none;
  text-align: left;
  color: var(--txt);
  cursor: pointer;
}
.selection-item__name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selection-item__meta {
  font-size: 12px;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}
.selection-item__del {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  background: none;
  border: none;
  border-left: 1px solid var(--line);
  color: var(--mut);
  cursor: pointer;
}
.selection-item__del:hover { color: var(--danger); background: var(--acc-soft); }
.selection-item__del svg { width: 16px; height: 16px; }

.empty {
  padding: 40px;
  text-align: center;
  color: var(--mut);
}

/* Willkommenstext oben in der Galerie (Tab „Allgemein"). Zeilenumbrüche bleiben
   erhalten (pre-wrap) – Server-Render UND Live-Vorschau setzen reinen Text. */
.welcome {
  margin-bottom: var(--gap);
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  line-height: 1.5;
}
.welcome[hidden] { display: none; }
.welcome--pres {
  background: var(--pres-card);
  border-color: var(--pres-line);
  color: var(--pres-fg);
  text-align: center;
}

/* Dezenter Ablaufhinweis nahe dem Willkommenstext (Kundenansicht). Klein und
   gedämpft, aber sichtbar; eine Uhr-Glyphe statt Emoji. */
.gallery-expiry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--gap);
  font-size: .85rem;
  color: var(--mut);
}
.gallery-expiry::before {
  content: '◷';
  font-size: 1.05em;
  opacity: .85;
}
.gallery-expiry--pres {
  display: flex;
  justify-content: center;
  color: var(--pres-mut);
}
/* Abgelaufene Galerie: nur in der Admin-Ansicht sichtbar – deutlicher Warnhinweis. */
.gallery-expiry--expired {
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  border-radius: var(--radius, 8px);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  font-weight: 600;
}
.gallery-expiry--expired::before {
  content: '⚠';
}

/* Upload-Fortschritt: ein festes Fenster (#uploads) unten rechts. */
.uploads {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 300px;
  z-index: 60;
}
/* Das Fenster selbst: Kopf (Titel + Restzähler), Liste der aktiven Übertragungen
   und am Ende eine Zusammenfassung. */
.upload-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.upload-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.upload-panel__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt);
}
.upload-panel__count {
  font-size: 12px;
  color: var(--mut);
}
.upload-panel__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upload-panel__summary {
  margin: 0;
  font-size: 13px;
  color: var(--txt);
}
.upload {
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.upload__bar {
  height: 4px;
  margin-top: 6px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.upload__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--acc);
  transition: 0.2s;
}

/* =========================================================================
   Wiederverwendbare Bausteine (CLAUDE.md §5): zentral definiert, nicht pro
   Ansicht neu. Häufig genutzt = Eingaben, Schalter, Icon-Buttons, Felder.
   ========================================================================= */

/* Feld-Gruppe: Label über Control, gleichmäßige Abstände */
.field { display: grid; gap: 6px; }
.field__label { font-size: 13px; color: var(--mut); }
.field__hint { font-size: 12px; color: var(--mut); }

/* Farbton-Regler (nur Hue, kein Spektrum): Regenbogen-Spur als Orientierung. */
.hue-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(
    to right,
    hsl(0 70% 55%), hsl(60 70% 55%), hsl(120 70% 55%),
    hsl(180 70% 55%), hsl(240 70% 55%), hsl(300 70% 55%), hsl(360 70% 55%)
  );
  cursor: pointer;
}
.hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--line);
}
.hue-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--card);
}

/* Dezente Färbung: Wahl zwischen „Grau" (Swatch) und „Farbe" (Farbton-Regler). */
.tint-pick { display: flex; gap: 14px; align-items: flex-end; }
.tint-pick__opt { display: flex; flex-direction: column; gap: 5px; }
.tint-pick__opt--grow { flex: 1; min-width: 0; }
.tint-pick__cap { font-size: 12px; color: var(--mut); }
.tint-swatch {
  width: 54px;
  height: 16px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(90deg, #e6e8ec, #1d2027);
}
.tint-swatch.is-active,
.hue-slider.is-active { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }

.input { transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.input:focus { box-shadow: 0 0 0 3px var(--acc-soft); }

.btn { transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.btn:active { transform: translateY(1px); }

/* Icon-Button (Zahnrad, Schließen, Navigation) */
.btn--icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--txt);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn--icon:hover { border-color: var(--acc); background: var(--acc-soft); }

/* Toggle-Switch: optisch klarer als nackte Checkbox, gleiche Semantik */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch__input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--line);
  transition: background var(--dur) var(--ease);
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--dur) var(--ease);
}
.switch__input:checked + .switch__track { background: var(--acc); }
.switch__input:checked + .switch__track::after { transform: translateX(18px); }
.switch__input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--acc-soft); }
.switch__label { font-size: 14px; color: var(--txt); }

/* Kachel-Hover: dezentes Anheben + Klickbarkeit der Großansicht andeuten */
.tile { transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.tile:hover { border-color: #3a3f4d; }
.tile__thumb { cursor: zoom-in; }

/* =========================================================================
   Einstellungs-Overlay (Popup mit Tabs) – Basis für Galerie- & globales Menü.
   Design-Regeln: docs/menus.md. Liegt auf Drawer-Ebene (z-index 40).
   ========================================================================= */
/* Das GESAMTE Overlay scrollt – nicht ein Bereich darin. Der Container ist die
   einzige Scrollfläche; das Panel wird so hoch wie sein Inhalt und per margin:auto
   zentriert, bleibt aber bei viel Inhalt von oben erreichbar (Flex-auto-Margin-Trick). */
.settings {
  position: fixed;
  inset: 0;
  z-index: 40;
  visibility: hidden;
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(4vh, 24px) 16px;
}
.settings.is-open { visibility: visible; }

.settings__backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.settings.is-open .settings__backdrop { opacity: 1; }

.settings__panel {
  position: relative;
  margin: auto;
  width: min(760px, 94vw);
  /* keine feste Höhe: das Panel wächst mit dem Inhalt, der Container scrollt */
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.settings.is-open .settings__panel { opacity: 1; transform: none; }

.settings__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px var(--pad);
  border-bottom: 1px solid var(--line);
}
.settings__title { margin: 0; font-size: 16px; font-weight: 600; flex: 1; }

.settings__body { display: flex; }

.settings__tabs {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
  border-right: 1px solid var(--line);
}
.settings__tab {
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--mut);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.settings__tab:hover { background: var(--acc-soft); color: var(--txt); }
.settings__tab[aria-selected="true"] { background: var(--acc-soft); color: var(--txt); font-weight: 600; }

.settings__content { flex: 1; min-width: 0; padding: 20px var(--pad); }
.settings__tabpanel { display: grid; gap: 16px; }
.settings__tabpanel[hidden] { display: none; } /* sonst überstimmt display:grid das hidden-Attribut */
.settings__panel-title { margin: 0; font-size: 15px; font-weight: 600; }
.settings__group { display: grid; gap: 14px; }

@media (max-width: 640px) {
  .settings { padding: 0; }
  .settings__panel {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .settings__body { flex-direction: column; }
  .settings__tabs {
    flex: 0 0 auto;
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }
  .settings__tab { white-space: nowrap; }
}

/* Wasserzeichen-Sektion (im Sicherheits-Tab) */
.wm-manage { margin-top: 4px; }
.wm-manage > summary {
  cursor: pointer;
  padding: 6px 0;
  font-size: 13px;
  color: var(--acc);
}
.wm-form { display: grid; gap: 12px; margin-top: 8px; }
.wm-positions {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.wm-positions__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  margin-top: 8px;
}
.wm-pos { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.wm-form__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
input[type="range"] { width: 100%; accent-color: var(--acc); }

/* Sicherheit-Tab: Galerie-Link mit Kopier-Button nebeneinander */
.security-link { display: flex; gap: 8px; }
.security-link .input { flex: 1; font-family: ui-monospace, monospace; font-size: 12px; }

/* Editierbarer Galerie-Link: fester Präfix (Basis-URL) + frei wählbarer Slug.
   Präfix und Eingabe sitzen in einem gemeinsamen Rahmen, optisch wie ein Feld. */
.link-edit {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: hidden;
}
.link-edit:focus-within { border-color: var(--acc); }
.link-edit__prefix {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 55%;
  padding: 0 2px 0 12px;
  color: var(--mut);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Langer Präfix wird VORNE gekürzt, sodass das Ende (…/galerie/) sichtbar bleibt. */
  direction: rtl;
}
.link-edit__slug.input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-left: 0;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.link-edit__slug.input:focus-visible { outline: none; }
.link-edit__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Wasserzeichen-Bibliothek (globales Admin-Menü): Liste vorhandener Einträge. */
.wmlib-list { display: grid; gap: 8px; margin-bottom: 16px; }
.wmlib-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.wmlib-item__info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wmlib-item__name { font-weight: 600; }
.wmlib-item__meta { font-size: 12px; color: var(--mut); }
.wmlib-item__actions { display: inline-flex; gap: 6px; }

/* =========================================================================
   Großansicht – KEINE klassische schwebende Lightbox: das Bild nutzt so viel
   Höhe/Breite wie möglich. Die Bedien-UI liegt drum herum – links die
   Kommentarspalte (falls aktiviert), unter dem Bild die aktiven Abstimmungs-/
   Bewertungs-Buttons. Präsentations-Modus = nur Download.
   ========================================================================= */
.lightbox { position: fixed; inset: 0; z-index: 50; visibility: hidden; }
.lightbox.is-open { visibility: visible; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.lightbox.is-open .lightbox__backdrop { opacity: 0.97; }

/* Vollflächiger Dialog: links Kommentare, rechts Bild + Buttons drumherum */
.lightbox__dialog {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.lightbox.is-open .lightbox__dialog { opacity: 1; }

/* Kommentarspalte links (nur Review-Modus, nur wenn Kommentare aktiv) */
.lightbox__comments {
  flex: none;
  width: min(320px, 30vw);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--card);
  border-right: 1px solid var(--line);
}
.lightbox__comments-title {
  padding: 16px 16px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lightbox__comments-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 0 16px 14px;
}
.lightbox__comments-empty { color: var(--mut); font-size: 13px; }
.lightbox__comments-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.lightbox__comments-form .input { font-size: 13px; }

/* Datei-Infos (Maße, Größe, Aufnahmedaten) – oben in der linken Spalte, über
   dem Kommentar-Abschnitt. */
.lightbox__info {
  flex: none;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 6px;
}
.lightbox__info-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
/* Folgeabschnitt (z. B. IPTC unter „Datei") optisch absetzen. */
.lightbox__info-title:not(:first-child) { margin-top: 10px; }
.lightbox__info-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 8px;
  font-size: 13px;
}
.lightbox__info-key { color: var(--mut); }
.lightbox__info-val { color: var(--txt); word-break: break-word; }

/* Hauptbereich: Bild so groß wie möglich, Buttonleiste darunter */
.lightbox__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.lightbox__stage {
  position: relative;
  flex: 1;
  min-height: 0; /* erlaubt dem Flex-Item zu schrumpfen statt zu überlaufen */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 1vw, 14px);
  overflow: hidden; /* Sicherheitsnetz: nie über die Leiste hinaus */
}
.lightbox__img {
  /* Begrenzt auf die Bühnenfläche → läuft nie über, füllt aber die bindende
     Kante: ein Hochkant-Bild die volle Höhe, ein Querformat die volle Breite.
     object-fit: contain wahrt das Seitenverhältnis. */
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.lightbox__img.is-loaded { opacity: 1; }

/* Video/PDF in der Großansicht: füllen die Bühne wie das Bild. */
.lightbox__media {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.lightbox__video {
  width: auto;
  height: auto;
  object-fit: contain;
  background: #000;
}
.lightbox__pdf {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  border-radius: var(--radius, 6px);
}

/* Ladeanzeige, solange die Web-Version noch erzeugt/geladen wird. */
.lightbox__loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
}
.lightbox__spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: dd-spin 0.8s linear infinite;
}
@keyframes dd-spin {
  to { transform: rotate(360deg); }
}

/* Schließen oben rechts, Dateiname oben links – schwebend über dem Bild */
.lightbox__toolbar { position: absolute; top: 12px; right: 12px; }
.lightbox__toolbar .btn--icon {
  background: rgba(0, 0, 0, 0.5);
  border-color: transparent;
  color: #fff;
}
.lightbox__toolbar .btn--icon:hover { background: rgba(0, 0, 0, 0.78); }

.lightbox__caption {
  position: absolute;
  top: 14px;
  left: 14px;
  max-width: 60%;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fokuspunkt-Wähler: Marker (Ring) + Hinweis beim Titelbild-Setzen (Admin). */
.lightbox__focus {
  position: absolute;
  z-index: 4;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.lightbox__focus::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #fff;
}
.lightbox__focus-hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 4;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 13px;
  pointer-events: none;
}

/* Navigation links/rechts am Bildrand */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 70px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lightbox__stage:hover .lightbox__nav { opacity: 1; }
.lightbox__nav:hover { background: rgba(0, 0, 0, 0.72); }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }
.lightbox__nav[disabled] { opacity: 0 !important; pointer-events: none; }

/* Button-/Bewertungsleiste unter dem Bild */
.lightbox__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.lightbox__controls:empty { display: none; }
.lightbox__controls .tile__pick {
  position: static;
  opacity: 1;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
}
.lightbox__controls .tile__rating {
  position: static;
  text-shadow: none;
  font-size: 15px;
}

/* Umschalter für die Kommentarspalte – nur auf Mobil sichtbar (Desktop zeigt
   die Spalte dauerhaft links). */
.lightbox__comments-toggle { display: none; }

/* Auf Mobil: Bild bekommt die volle Höhe, die Kommentarspalte liegt als
   einklappbare Lasche unter dem Bild und öffnet erst auf Knopfdruck. */
@media (max-width: 720px) {
  .lightbox__dialog { flex-direction: column-reverse; }
  /* Erlaubt dem Hauptbereich (Bild + Leiste) neben der Kommentar-Lasche zu
     schrumpfen – sonst ragt ein Hochkant-Bild oben aus dem Bildschirm. */
  .lightbox__main { min-height: 0; }

  .lightbox__comments {
    width: 100%;
    border-right: none;
    border-top: 1px solid var(--line);
  }

  /* Einklappbare Kommentarspalte: standardmäßig zu, öffnet über den Umschalter. */
  .lightbox__comments--collapsible {
    max-height: 0;
    overflow: hidden;
    border-top: none;
    transition: max-height var(--dur) var(--ease);
  }
  .lightbox.is-comments-open .lightbox__comments--collapsible {
    max-height: 60vh;
    border-top: 1px solid var(--line);
  }

  .lightbox__comments-toggle { display: inline-flex; align-items: center; gap: 6px; }
}

/* Neu eingefügte Kommentare/Kacheln kurz einblenden */
@keyframes dd-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.is-fresh { animation: dd-fade-in var(--dur) var(--ease); }

/* =========================================================================
   Eigene Meldungen & Rückfragen (statt nativer alert/confirm/prompt)
   ========================================================================= */
.toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(440px, calc(100vw - 32px));
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.is-in { opacity: 1; transform: none; }
.toast__text { flex: 1; font-size: 14px; line-height: 1.4; }
.toast__close {
  flex: none;
  background: transparent;
  border: none;
  color: var(--mut);
  font-size: 14px;
  cursor: pointer;
}
.toast__close:hover { color: var(--txt); }
.toast--error { border-left-color: var(--danger); }
.toast--success { border-left-color: #2ecc71; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__dialog {
  position: relative;
  width: min(440px, 100%);
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.modal.is-open .modal__dialog { opacity: 1; transform: none; }
.modal__title { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.modal__message { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.5; }
.modal__field { margin-top: 16px; }
.modal__field .input { width: 100%; }
.modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* --- Fokus-Editor (Titelbild/Galeriebild – Mittelpunkt festlegen) --- */
.focus-edit__dialog { width: min(680px, 100%); padding: 20px; }
.focus-edit__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.focus-edit__head .modal__title { margin: 0; }
.focus-edit__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 18px;
  color: var(--mut);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.focus-edit__close:hover { color: var(--fg); background: var(--card-hi, rgba(255, 255, 255, 0.06)); }
.focus-edit__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  /* Höhe wächst mit dem Bild bis zur Deckelung – kein festes Seitenverhältnis,
     sonst würden Hochformate beschnitten. Das Bild begrenzt sich selbst. */
  padding: 8px;
  background: #16181d;
  border-radius: var(--radius);
  overflow: hidden;
}
/* „contain": durch max-width (Breite der Bühne) UND max-height (Viewport) bleibt das
   Bild vollständig sichtbar – egal ob Hoch- oder Querformat. */
.focus-edit__img {
  display: block;
  max-width: 100%;
  max-height: 64vh;
  cursor: crosshair;
  touch-action: none; /* eigene Pointer-Geste, kein Scrollen während des Ziehens */
}
.focus-edit__dot {
  position: absolute;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.focus-edit__empty { color: var(--mut); font-size: 14px; }
.focus-edit__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.focus-edit__spacer { flex: 1; }
.btn--danger-text { color: var(--danger, #e5484d); }
.btn--danger-text:hover { border-color: var(--danger, #e5484d); }

/* =========================================================================
   Bewegung respektieren: wer Reduced-Motion wünscht, bekommt keine
   Transitions/Animationen (nur sofortige Zustandswechsel).
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================================
   Präsentationsansicht (Kundenseite, eigenständig & clean) – Block A.
   Hell/Dunkel über die Body-Klasse, optionaler dezenter Farbstich via
   --pres-tint (in presentation.js gesetzt). Siehe memory.md / docs/menus.md.
   ========================================================================= */
body.pres { min-height: 100vh; background: var(--pres-base); color: var(--pres-fg); }
body.pres--dark  { --pres-base: #0b0c0f; --pres-fg: #e8eaf0; --pres-card: #16181d; --pres-line: #23262e; --pres-mut: #8b90a0; --pres-shimmer-hi: #232730; }
body.pres--light { --pres-base: #f5f6f8; --pres-fg: #1a1d24; --pres-card: #ffffff; --pres-line: #e3e5ea; --pres-mut: #5a5f6b; --pres-shimmer-hi: #eceef2; }
/* „Gedämpft": helles bzw. dunkles Grau als Grundton statt Weiß/Schwarz. */
body.pres--gray.pres--dark  { --pres-base: #1d2027; }
body.pres--gray.pres--light { --pres-base: #e6e8ec; }
/* Dezenter Farbstich: Basis leicht in Richtung Tint mischen (Fallback: Basis). */
body.pres.has-tint { background: color-mix(in srgb, var(--pres-base) 90%, var(--pres-tint)); }

/* Admin-Leiste der Präsentations-Vorschau (nur ?vorschau=1): Hinweis + Rückweg. */
.pres-adminbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(8, 10, 14, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
}
.pres-adminbar__back { color: #fff; text-decoration: none; font-weight: 600; }
.pres-adminbar__back:hover { text-decoration: underline; }

.pres-header { text-align: center; padding: 44px 20px 12px; }
.pres-header__title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(20px, 4vw, 30px);
  letter-spacing: 0.01em;
}

/* Vollbild-Titelbild (Hero) der Präsentationsansicht mit Parallax. Die
   Hintergrundebene ist absichtlich höher als der Viewport (top:-20%/height:140%),
   damit der Parallax-Versatz (JS: translateY bis 20 %) keine Kante zeigt. */
.pres-hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.pres-hero__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -20%;
  height: 140%;
  background: var(--pres-card) center / cover no-repeat;
  will-change: transform;
}
.pres-hero__bg.is-loaded { animation: dd-fade-in var(--dur) var(--ease); }
.pres-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.12));
}
.pres-hero__title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 20px;
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: clamp(1.8rem, 5vw, 3.4rem);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}
.pres-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 1;
  color: rgba(255, 255, 255, 0.85);
  font-size: 24px;
  animation: dd-hero-bounce 1.8s ease-in-out infinite;
}
@keyframes dd-hero-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

.pres-container { margin: 0 auto; padding: 16px var(--pad) 56px; }

/* Ruhiges Masonry-Raster – nur Bilder, kein Chrome. */
/* Bildvorschau-Größe: steuert column-width des Masonry-Grids. */
.pres-grid {
  column-width: 300px;
  column-gap: var(--gap);
  /* Flackerfrei einblenden wie das Abstimmungs-Raster (siehe .grid). */
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.pres-grid.is-in { opacity: 1; }
/* Gruppierung (Präsentation): volle-Breite-Unterüberschrift über alle Spalten. */
.pres-grid__group {
  column-span: all;
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--pres-fg, var(--txt)) 18%, transparent);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.4rem);
  font-weight: 600;
  color: var(--pres-fg, var(--txt));
}
.pres-grid__group:first-child { margin-top: 0; }
.pres-grid__group-count {
  font-size: 0.72em;
  font-weight: 600;
  opacity: 0.6;
}
body.pres--size-small  .pres-grid { column-width: 180px; }
body.pres--size-large  .pres-grid { column-width: 440px; }
body.pres--size-xlarge .pres-grid { column-width: 640px; }

/* Bildabstand: steuert gap (column-gap) und margin-bottom zwischen den Kacheln.
   Staffel: klein 4px, mittel 24px, groß 48px. */
body.pres--spacing-small  .pres-grid { column-gap: 4px; }
body.pres--spacing-small  .pres-tile { margin-bottom: 4px; }
body.pres--spacing-medium .pres-grid { column-gap: 24px; }
body.pres--spacing-medium .pres-tile { margin-bottom: 24px; }
body.pres--spacing-large  .pres-grid { column-gap: 48px; }
body.pres--spacing-large  .pres-tile { margin-bottom: 48px; }

.pres-tile {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 var(--gap);
  break-inside: avoid;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--pres-card) center / cover no-repeat;
  cursor: zoom-in;
}
.pres-tile.is-loaded { animation: dd-fade-in var(--dur) var(--ease); }

/* Schimmer-Platzhalter, solange die Vorschau noch erzeugt/geladen wird. Eigene
   Regel, weil die Hintergrund-Kurzform von .pres-tile die globale .is-loading-
   Füllung sonst überschreibt – hier mit Präsentations-Tokens (hell/dunkel korrekt). */
.pres-tile.is-loading {
  background-image: linear-gradient(
    100deg,
    var(--pres-card) 30%,
    var(--pres-shimmer-hi) 50%,
    var(--pres-card) 70%
  );
  background-size: 200% 100%;
  animation: dd-shimmer 1.25s ease-in-out infinite;
}

/* Kanten: eckig = kein Radius, rund = stärkerer Radius (Standard = var(--radius)). */
body.pres--corners-square .pres-tile { border-radius: 0; }
body.pres--corners-round  .pres-tile { border-radius: calc(var(--radius) * 2); }

/* Hover-Download auf der Präsentations-Kachel (analog .tile__actions). Auf
   Touch-Geräten (kein Hover) dauerhaft sichtbar, da kein Mouseover existiert. */
.pres-tile__actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.pres-tile:hover .pres-tile__actions,
.pres-tile:focus-within .pres-tile__actions { opacity: 1; }
.pres-tile__action {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.pres-tile__action:hover { background: rgba(0, 0, 0, 0.78); }
@media (hover: none) {
  .pres-tile__actions { opacity: 1; }
}

/* „Alle herunterladen" – zentriert direkt unter der Überschrift. */
.pres-download-all {
  display: flex;
  justify-content: center;
  padding: 4px 0 24px;
}

/* Wechsel in Abstimmungsansicht: dezenter Link-Button am Ende der Präsentation. */
.pres-voting-switch {
  display: flex;
  justify-content: center;
  padding: 32px 0 16px;
}
.pres-voting-switch__btn { opacity: .55; }
.pres-voting-switch__btn:hover { opacity: 1; }

/* Hell-Variante: die wiederverwendeten Bausteine an das Theme anpassen. */
body.pres--light .gallery-card { background: var(--pres-card); border-color: var(--pres-line); }
body.pres--light .gallery-card__name { color: var(--pres-fg); }
body.pres--light .empty { color: var(--pres-mut); }
body.pres--light .site-footer { color: var(--pres-mut); border-color: var(--pres-line); }

/* --- Verschieben: Galerie-Ziel-Picker (Modal-Liste) --- */
.move-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 50vh;
  overflow-y: auto;
  margin-top: 8px;
}
.move-tree__item {
  text-align: left;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--txt);
  font: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.move-tree__item:hover:not(:disabled) { background: var(--acc-soft); }
.move-tree__item.is-current { color: var(--mut); cursor: default; }

/* --- Manuelle Reihenfolge: Drag & Drop im Raster --- */
.tile--draggable { cursor: grab; }
.tile--draggable.is-dragging { opacity: 0.5; cursor: grabbing; }
.tile.is-drop-target { outline: 2px dashed var(--acc); outline-offset: 2px; }

/* --- Verschieben per Drag: Kacheln auf Untergalerie-Karten ziehen --- */
/* Während eine Kachel gezogen wird, signalisieren die Karten ihre Ablagebereitschaft. */
body.is-moving-tiles .gallery-card {
  outline: 1px dashed var(--line);
  outline-offset: 2px;
  transition: outline-color 0.12s ease, transform 0.12s ease;
}
.gallery-card.is-drop-target {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  transform: scale(1.02);
}
/* Breadcrumb-Vorfahren als Ziel (Bilder eine Ebene höher schieben). */
body.is-moving-tiles a.breadcrumbs__crumb {
  outline: 1px dashed var(--line);
  outline-offset: 3px;
  border-radius: 4px;
}
a.breadcrumbs__crumb.is-drop-target {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   Ereignis-Panel
   ============================================================ */

/* Schiebe-Panel von rechts (gleiche Overlay-Technik wie .settings) */
.events-panel {
  position: fixed;
  inset: 0;
  z-index: 400;
  visibility: hidden;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  /* Verhindert horizontales Scrollen: der ausgeblendete Dialog ist um 24px nach
     rechts versetzt; ohne Clipping vergrößert das die Seitenbreite. */
  overflow: hidden;
}
.events-panel.is-open { visibility: visible; }

.events-panel__backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.events-panel.is-open .events-panel__backdrop { opacity: 1; }

.events-panel__dialog {
  position: relative;
  z-index: 1;
  width: 420px;
  max-width: 100vw;
  background: var(--card);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.events-panel.is-open .events-panel__dialog { opacity: 1; transform: none; }

.events-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.events-panel__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.events-panel__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.events-panel__filter {
  padding: 10px var(--pad);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.events-panel__list {
  flex: 1;
  overflow-y: auto;
}

/* Einzelnes Ereignis */
.events-item {
  display: flex;
  gap: 12px;
  padding: 12px var(--pad);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}
.events-item--unread {
  background: color-mix(in srgb, var(--acc) 6%, transparent);
}

/* Rund-Icon links */
.events-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--card-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  line-height: 1;
}
.events-icon--flag-red    { color: #e53935; }
.events-icon--flag-yellow { color: #f9a825; }
.events-icon--flag-green  { color: #43a047; }

/* Textblock */
.events-item__body {
  flex: 1;
  min-width: 0;
}
.events-item__text {
  font-size: .875rem;
  line-height: 1.45;
  margin: 0 0 .25rem;
}
.events-item__gallery {
  color: var(--acc);
  text-decoration: none;
  font-weight: 500;
}
.events-item__gallery:hover { text-decoration: underline; }

.events-item__time {
  font-size: .75rem;
  color: var(--mut);
}

/* Leer-Zustand */
.events-empty {
  padding: 2.5rem var(--pad);
  text-align: center;
  color: var(--mut);
  font-size: .875rem;
}

/* Badge (Ungelesen-Zähler) auf dem Topbar-Button */
.topbar__events {
  position: relative;
}
.events-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: .875rem;
  height: .875rem;
  padding: 0 2px;
  background: var(--red, #e53935);
  color: #fff;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 700;
  line-height: .875rem;
  text-align: center;
  pointer-events: none;
  letter-spacing: 0;
}

/* Kleiner Switch-Variant für den Galerie-Toggle */
.switch--small .switch__track {
  width: 2rem;
  height: 1.125rem;
}
.switch--small .switch__track::after {
  width: .875rem;
  height: .875rem;
}

/* Konten-/Mitarbeiter-Liste (globale Einstellungen, Tab „Mitarbeiter"). */
.user-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--gap);
}
.user-list__row {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.user-list__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.user-list__name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-list__meta {
  font-size: 0.85rem;
  color: var(--mut);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-list__delete { flex: none; }

/* =========================================================================
   Touch & Mobil (CLAUDE.md §5: mobile-first, große Ziele, kein Hover).
   Alle Touch-Anpassungen gebündelt an einer Stelle. Zwei Effekte:
   1) Hover-abhängige Steuerungen werden dauerhaft sichtbar/bedienbar – sonst
      zeigt der erste Tap nur den Hover-Zustand und es braucht einen zweiten.
   2) Tap-Ziele wachsen auf ~44px, damit sie sicher zu treffen sind.
   ========================================================================= */
@media (hover: none), (pointer: coarse) {
  /* --- Hover-Reveals dauerhaft zeigen (kein Doppeltipp mehr) --- */

  /* Auswahl-„+", Aktions-Buttons und Galerie-Dreipunktmenü immer sichtbar. */
  .tile__select,
  .tile__actions,
  .gallery-card .card-menu__toggle { opacity: 1; }

  /* Review-Leiste über dem Bild dauerhaft sicht- UND bedienbar (sonst fängt der
     erste Tap nur den Hover ab). */
  :is(.grid--clean, .grid--masonry) .tile__review {
    opacity: 1;
    pointer-events: auto;
  }
  /* Aggregat-Badge weicht der nun dauerhaften Review-Leiste – beide säßen sonst
     übereinander am unteren Bildrand. */
  :is(.grid--clean, .grid--masonry) .tile__agg { display: none; }

  /* Lightbox-Navigation dauerhaft sichtbar (zusätzlich zur Wischgeste). */
  .lightbox__nav { opacity: 1; }

  /* Kein „Anheben"/Hover-Färben beim Antippen einer Kachel. */
  .tile:hover { transform: none; border-color: var(--line); }

  /* --- Keine Hover-Effekte auf Touch ---
     Touch kennt kein echtes Hover; nach einem Tap „klebt" der Hover-Zustand und
     verfälscht das sichtbare Bild (z. B. wirkt eine eben abgeschaltete Markierung
     weiter aktiv). Darum den Hover-Look der Steuerungen auf den Ruhezustand
     zurücksetzen. Aktive Zustände (.is-on) bleiben dabei unberührt. */
  .flag:hover { transform: none; }
  .tile__pick:not(.is-on):hover { color: var(--mut); }
  .chip:not(.is-on):hover { color: var(--mut); }
  .chip--like.is-on:hover { color: #ff6b6b; border-color: #ff6b6b; } /* Aktiv bleibt rot */
  .filter-chip:not(.is-on):hover { color: var(--mut); border-color: var(--line); }
  .filter-flag:not(.is-on):hover::before { opacity: 0.55; }
  .tile__select:not(.is-on):hover { background: rgba(0, 0, 0, 0.6); }
  .tile__action--del:hover { background: rgba(0, 0, 0, 0.6); }
  .card-menu__toggle:hover { background: rgba(0, 0, 0, 0.55); border-color: rgba(255, 255, 255, 0.18); }
  .btn:hover { filter: none; }
  .btn--ghost:hover { border-color: var(--line); }
  .btn--icon:hover { border-color: var(--line); background: transparent; }
  .lightbox__toolbar .btn--icon:hover { background: rgba(0, 0, 0, 0.5); }
  .lightbox__nav:hover { background: rgba(0, 0, 0, 0.42); }
  /* Raster-Overlay (eigene Glas-Optik): Ruhefarbe ist #fff, nicht --mut –
     darum die generellen Resets hier auf den Overlay-Ruhezustand zurückziehen. */
  :is(.grid--clean, .grid--masonry) .tile__review .chip:not(.is-on):hover { color: #fff; }
  :is(.grid--clean, .grid--masonry) .tile__review .tile__pick:not(.is-on):hover { color: #fff; }

  /* --- Größere Tap-Ziele (~40–44px) --- */
  .tile__action { width: 40px; height: 40px; font-size: 17px; }
  .tile__select { width: 36px; height: 36px; font-size: 22px; }
  .tile__comment-badge { left: 52px; height: 36px; }
  .card-menu__toggle { width: 40px; height: 40px; }

  .filter-chip { height: 40px; min-width: 40px; font-size: 14px; }
  .filter-flag { width: 44px; }

  /* Review-Steuerung (Chips, Merken, Flags) fingerfreundlich – auch im Overlay
     über dem Bild (dort höhere Spezifität, daher explizit nachgezogen). */
  .chip { padding: 8px 12px; font-size: 13px; }
  .tile__pick { font-size: 20px; padding: 6px 8px; }
  .flags { gap: 14px; }
  .flag { width: 20px; height: 24px; }
  :is(.grid--clean, .grid--masonry) .tile__review .flags { gap: 14px; padding: 9px 14px; }
  :is(.grid--clean, .grid--masonry) .tile__review .tile__pick { padding: 8px 12px; }
  :is(.grid--clean, .grid--masonry) .tile__review .chip { padding: 8px 12px; }

  /* Lightbox: Pfeile und Bedienleiste großzügiger. */
  .lightbox__nav { width: 56px; height: 92px; font-size: 30px; }
  .lightbox__controls { gap: 18px; padding: 14px 16px; }

  /* Menü-/Tab-Einträge bekommen mehr Höhe zum Treffen. */
  .menu__item, .card-menu__item, .usermenu__item { padding-top: 12px; padding-bottom: 12px; }
  .settings__tab { padding: 12px 14px; }
}

/* Engere Seitenränder auf kleinen Schirmen → mehr Platz fürs Bild, weniger
   gequetschte Bedienelemente. Wirkt über das zentrale --pad-Token. */
@media (max-width: 640px) {
  :root { --pad: 16px; }

  /* Toolbar bleibt einreihig: Suche schrumpft, Sortierung als Icon-Select,
     „Neue Galerie“ nur noch als „+“. */
  .admin-tools { gap: 8px; }
  .admin-tools .input[type="search"] { flex: 1 1 auto; min-width: 0; }

  /* Sortierung: quadratischer Icon-Button. Das Select liegt transparent darüber
     (bleibt tippbar und öffnet die native Auswahl), sichtbar ist nur das Symbol. */
  .admin-tools__sort-wrap {
    flex: 0 0 auto;
    min-width: 0;
    width: 44px;
  }
  .admin-tools__sort {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding-left: 0;
    padding-right: 0;
    color: transparent;
    background-image: none;
  }
  .admin-tools__sort-icon {
    display: grid;
    place-items: center;
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: var(--txt);
  }

  /* „Neue Galerie“ → reines „+“-Icon, quadratisch */
  .admin-tools__add { flex: 0 0 auto; padding: 10px 12px; }
  .admin-tools__add-label { display: none; }

  .topbar__brand { max-width: 38vw; }
}