/* ========================================================================
   Redesign-Oberfläche (Paket 6a, ab 6b auch Präsentation und Kundenseiten). Geladen von includes/shell.php,
   gallery.php und includes/templates/_shared/header.php.
   Tokens kommen aus app.css (input.css). Vorlage: design/proofing-prototype-v2.html,
   Regeln dort wortgleich übernommen; Mobil als @media statt @container.
   ======================================================================== */
:root { --mtn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0 170 L55 110 L90 140 L150 55 L195 125 L235 85 L285 145 L335 70 L400 150 V300 H0Z' fill='rgba(55,58,78,.5)'/%3E%3Cpath d='M0 235 L70 180 L120 210 L185 160 L255 222 L315 178 L400 225 V300 H0Z' fill='rgba(26,32,28,.78)'/%3E%3C/svg%3E"); }
html, body { height:100%; }
body.ui { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-ui); font-size:15px; }
/* :where() = keine Spezifität, damit .btn-dark usw. ihre Farben behalten */
:where(.ui) :where(button, input, textarea, select) { font:inherit; color:inherit; }
:where(.ui) button { cursor:pointer; }
:where(.ui) a { color:inherit; }
:where(.ui) :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
[hidden] { display:none !important; }
  .serif { font-family:var(--font-display); font-weight:600; letter-spacing:-.015em; }
  .muted { color:var(--muted); }
  .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* Shell: Seitenleiste + Kopfzeile */
  .shell { position:relative; display:grid; grid-template-columns:225px minmax(0,1fr); grid-template-rows:minmax(0,1fr); height:100vh; height:100dvh; }
  .side { display:flex; flex-direction:column; gap:2px; padding:22px 16px 16px; border-right:1px solid var(--border); background:var(--bg); position:relative; z-index:30; }
  .nav { flex:1 1 auto; min-height:0; overflow:auto; }
  .brand { display:flex; align-items:center; gap:12px; padding:0 10px 24px; font-size:17px; font-weight:700; text-decoration:none; font-family:var(--font-display); }
  .brand-mark { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:var(--primary); color:var(--on-primary); }
  .brand-mark .i { width:16px; height:16px; }
  .nav a { display:flex; align-items:center; gap:14px; height:44px; padding:0 14px; border-radius:10px; font-size:15px; text-decoration:none; }
  .nav a:hover { background:var(--surface-alt); }
  .nav a[aria-current="page"] { background:var(--accent-soft); color:var(--accent); font-weight:500; }
  .nav-label { margin:16px 14px 6px; padding-top:18px; border-top:1px solid var(--border); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .nav-sep { margin:16px 14px; border:0; border-top:1px solid var(--border); }
  .side-foot { flex:none; display:grid; gap:10px; padding-top:20px; }
  .storage { padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); font-size:13px; }
  .storage strong { display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:4px; }
  .storage .i { width:16px; height:16px; }
  .bar { height:6px; border-radius:99px; background:var(--surface-alt); margin-top:10px; overflow:hidden; }
  .bar i { display:block; height:100%; width:43%; background:var(--accent); border-radius:inherit; }
  .user-row { display:flex; align-items:center; gap:10px; min-height:48px; padding:6px 8px; border:0; border-radius:10px; background:none; text-align:left; font-size:14px; }
  .user-row:hover { background:var(--surface-alt); }
  .user-row small { display:block; color:var(--muted); font-size:12px; }
  .user-row .i { margin-left:auto; width:16px; height:16px; color:var(--muted); }
  .avatar { width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--surface-alt); border:1px solid var(--border); font-size:12px; font-weight:600; }

  .col { display:flex; flex-direction:column; min-width:0; height:100%; }
  .top { flex:none; display:flex; align-items:center; gap:14px; height:68px; padding:0 32px; }
  .crumb { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); min-width:0; }
  .crumb a { text-decoration:none; }
  .crumb a:hover { color:var(--ink); }
  .crumb .i { width:16px; height:16px; }
  .crumb b { font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .spacer { flex:1; }
  .search { display:flex; align-items:center; gap:10px; height:42px; width:310px; max-width:100%; padding:0 8px 0 14px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface); color:var(--muted); }
  .search:focus-within { outline:2px solid var(--accent); outline-offset:1px; }
  .search input { flex:1; min-width:0; border:0; background:none; outline:0; font-size:13px; }
  .search input::placeholder { color:var(--muted); }
  .kbd { display:flex; gap:3px; }
  .kbd kbd { min-width:22px; height:22px; padding:0 5px; display:grid; place-items:center; border:1px solid var(--border); border-radius:6px; font:500 11px var(--font-ui); color:var(--muted); background:var(--bg); }
  .icon-btn { position:relative; width:40px; height:40px; flex:none; display:grid; place-items:center; border:0; border-radius:50%; background:none; }
  .icon-btn:hover { background:var(--surface-alt); }
  .icon-btn .dot, .kpi .dot { position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 2px var(--bg); }
  .menu-btn { display:none; }
  .main { flex:1; min-height:0; overflow:auto; padding:0 32px 40px; }

/* Gemeinsame Bausteine */
  .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); }
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:44px; padding:0 20px; border:1px solid var(--border); border-radius:var(--radius-ctl); background:var(--surface); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
  .btn:hover { background:var(--surface-alt); }
  .btn .i { width:18px; height:18px; }
  .btn-dark { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
  .btn-accent { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
  .btn-dark:hover, .btn-accent:hover { background:color-mix(in srgb, currentColor 12%, var(--primary)); }
  .btn-accent:hover { background:color-mix(in srgb, #000 12%, var(--accent)); }
  .btn-sm { height:36px; padding:0 12px; font-size:13px; font-weight:500; }
  .btn-block { width:100%; justify-content:flex-start; }
  .chip { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 8px 0 16px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface); font-size:14px; white-space:nowrap; }
  .chip .n { min-width:24px; height:24px; padding:0 7px; display:grid; place-items:center; border-radius:99px; background:var(--surface-alt); font-size:12px; color:var(--muted); }
  .chip .i { width:16px; height:16px; }
  .chip[aria-pressed="true"] { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
  .chip[aria-pressed="true"] .n { background:color-mix(in srgb, var(--on-primary) 20%, transparent); color:inherit; }
  .sdot { width:8px; height:8px; border-radius:50%; background:#16a34a; }
  .tags { display:flex; flex-wrap:wrap; gap:8px; }
  .tag { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; border:0; border-radius:var(--radius-pill); background:var(--surface-alt); font-size:13px; }
  .tag .n { color:var(--muted); font-size:12px; }
  .tag.add { background:none; border:1px dashed var(--border); color:var(--muted); }
  .tag .i { width:14px; height:14px; }
  .badge { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:99px; font-size:12px; font-weight:500; background:color-mix(in srgb, #16a34a 12%, var(--surface)); color:color-mix(in srgb, #15803d 80%, var(--ink)); }
  .badge.off { background:var(--surface-alt); color:var(--muted); }
  .badge.off .sdot { background:var(--muted); }
  .badge.warn { border:1px solid color-mix(in srgb, var(--danger) 35%, transparent); background:color-mix(in srgb, var(--danger) 12%, var(--surface)); color:var(--danger); font-weight:700; }
  .badge.wc { background:var(--accent-soft); color:var(--accent); }
  .badge.wc-admin { background:color-mix(in srgb, #d97706 12%, var(--surface)); color:color-mix(in srgb, #92400e 85%, var(--ink)); }
  .badge .i { width:13px; height:13px; }
  .link-recreate-alert { display:flex; align-items:flex-start; gap:12px; margin:0 0 16px; padding:14px 16px; border-color:color-mix(in srgb, var(--danger) 35%, var(--border)); background:color-mix(in srgb, var(--danger) 8%, var(--surface)); color:var(--danger); }
  .link-recreate-alert .i { width:22px; height:22px; flex:none; }
  .tbl-links tr.is-warning td { background:color-mix(in srgb, var(--danger) 6%, var(--surface)); }
  .link-name { display:inline-block; color:var(--ink); font-weight:600; text-decoration:none; text-underline-offset:3px; }
  .link-name:hover { text-decoration:underline; }
  .link-context { display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:400; }
  .previous-slug { display:block; margin-top:4px; font-size:12px; color:var(--danger); }
  .round { width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--accent-soft); color:var(--accent); flex:none; }
  .seg { display:flex; border:1px solid var(--border); border-radius:var(--radius-ctl); background:var(--surface); overflow:hidden; }
  .seg button { width:44px; height:42px; display:grid; place-items:center; border:0; background:none; color:var(--muted); }
  .seg button[aria-pressed="true"] { background:var(--primary); color:var(--on-primary); }
  .link { font-size:13px; font-weight:500; text-underline-offset:3px; }
  .sec-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
  .sec-head h2, .sec-head h3 { margin:0; font-size:17px; font-weight:600; }
  .sec-head h3 { font-size:15px; }

/* Bilder (dekorativ, z. B. Werkzeug-Karten) */
  .img { background:var(--mtn) center bottom / 100% 72% no-repeat, var(--sky, linear-gradient(180deg,#a9bccd,#e9cfae 55%,#b9793f)); }
  .s1 { --sky:linear-gradient(180deg,#a9bccd,#e9cfae 55%,#b9793f); }
  .s2 { --sky:linear-gradient(180deg,#7f93a8,#cdd6de 50%,#6d7f73); }
  .s3 { --sky:linear-gradient(180deg,#f0b27a,#e58a5c 45%,#6b4a3c); }
  .s4 { --sky:linear-gradient(180deg,#c9d3dc,#9fb0bf 50%,#4f5d52); }
  .s5 { --sky:linear-gradient(180deg,#8fa5bd,#d9b98f 55%,#8a5a2e); }
  .s6 { --sky:linear-gradient(180deg,#5d6b85,#b7a8b5 50%,#3e4a45); }

/* Menüs (native <details>) + Schalter */
  details.menu { position:relative; }
  details.menu > summary { list-style:none; }
  details.menu > summary::-webkit-details-marker { display:none; }
  .pop { position:absolute; z-index:30; top:calc(100% + 6px); right:0; min-width:230px; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-pop); color:var(--ink); }
  .pop.up-left { top:auto; bottom:calc(100% + 6px); left:0; right:auto; width:260px; }
  summary.user-row { list-style:none; cursor:pointer; }
  summary.user-row::-webkit-details-marker { display:none; }
  .pop.up { top:auto; bottom:calc(100% + 10px); right:auto; left:50%; transform:translateX(-50%); }
  .pop button, .pop a { width:100%; display:flex; align-items:center; gap:10px; min-height:40px; padding:0 10px; border:0; border-radius:8px; background:none; font-size:14px; text-align:left; text-decoration:none; }
  .pop button:hover, .pop a:hover { background:var(--surface-alt); }
  .pop .i { width:18px; height:18px; color:var(--muted); }
  .pop .danger, .pop .danger .i { color:var(--danger); }
  .pop hr { border:0; border-top:1px solid var(--border); margin:6px 0; }
  .pop .count { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--danger); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; }
  .pop p { margin:6px 10px 10px; font-size:13px; line-height:1.6; color:var(--muted); }
  .pop kbd { font:600 12px var(--font-ui); color:var(--ink); }

  /* Schalter (Wartung) */
  .switch { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:36px; padding:0; border:0; background:none; font-size:13px; }
  .switch .track { width:36px; height:20px; flex:none; border-radius:99px; background:var(--border); position:relative; transition:background .15s; }
  .switch .track::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:left .15s; }
  .switch[aria-checked="true"] .track { background:var(--accent); }
  .switch[aria-checked="true"] .track::after { left:18px; }

/* Dialog (native <dialog>) */
  .dlg { width:min(640px, calc(100% - 32px)); margin:auto; padding:20px; border:0; border-radius:16px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-pop); }
  .dlg::backdrop { background:rgba(0,0,0,.5); }
  .dlg-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:14px; }
  .dlg-head h2 { margin:0 0 4px; font-size:17px; }
  .dlg-head p { margin:0; font-size:13px; color:var(--muted); }
  .dlg-foot { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }

/* Glocke */
  .bellpop { width:340px; padding:8px; }
  .bellpop .bell-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 6px 8px; font-size:13px; }
  .ev { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:start; padding:8px 6px; border-radius:10px; font-size:13px; line-height:1.4; }
  .ev .i { width:17px; height:17px; margin-top:1px; color:var(--muted); }
  .ev small { grid-column:2; color:var(--muted); font-size:12px; }
  .ev.unread { background:var(--accent-soft); }
  .ev.unread .i { color:var(--accent); }

/* Dashboard */
  .hero { position:relative; display:flex; align-items:center; min-height:252px; overflow:hidden; }
  /* Weicher Rand: S-Kurve (smoothstep) statt linear, sonst sieht man, wo das Bild anfängt */
  .hero-img { position:absolute; inset:0 0 0 26%; -webkit-mask-image:linear-gradient(90deg, transparent, rgba(0,0,0,0.028) 6%, rgba(0,0,0,0.104) 13%, rgba(0,0,0,0.216) 20%, rgba(0,0,0,0.352) 26%, rgba(0,0,0,0.500) 32%, rgba(0,0,0,0.648) 39%, rgba(0,0,0,0.784) 46%, rgba(0,0,0,0.896) 52%, rgba(0,0,0,0.972) 58%, #000 65%); mask-image:linear-gradient(90deg, transparent, rgba(0,0,0,0.028) 6%, rgba(0,0,0,0.104) 13%, rgba(0,0,0,0.216) 20%, rgba(0,0,0,0.352) 26%, rgba(0,0,0,0.500) 32%, rgba(0,0,0,0.648) 39%, rgba(0,0,0,0.784) 46%, rgba(0,0,0,0.896) 52%, rgba(0,0,0,0.972) 58%, #000 65%); }
  .hero-copy { position:relative; padding:34px 30px; max-width:560px; }
  .hero h1 { margin:0 0 6px; font-size:40px; line-height:1.1; }
  .hero .lead { margin:0 0 14px; font-size:17px; color:var(--muted); }
  .hero p { margin:0 0 26px; font-size:15px; line-height:1.5; color:var(--muted); }
  .row-btns { display:flex; flex-wrap:wrap; gap:14px; }
  .kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:20px 0; }
  .kpi { position:relative; display:flex; align-items:center; gap:16px; padding:18px 20px; text-align:left; font-size:14px; }
  .kpi > .i:first-child { width:26px; height:26px; color:var(--muted); }
  .kpi b { display:flex; align-items:center; gap:10px; font-size:19px; }
  .kpi small { display:block; color:var(--muted); font-size:14px; }
  .kpi .dot { position:static; box-shadow:none; }
  .kpi .i:last-child { margin-left:auto; width:18px; height:18px; color:var(--muted); }
  .tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .tool { padding:24px; }
  .tool-head { display:flex; align-items:center; gap:18px; }
  .tool-head > .i { width:40px; height:40px; stroke-width:1.5; }
  .tool-head h2 { margin:0; font-size:26px; }
  .tool-head p { margin:2px 0 0; color:var(--muted); font-size:15px; }
  .tool-head .round { margin-left:auto; }
  .tool .tags { margin:18px 0; }
  .art { display:block; width:100%; height:210px; border-radius:10px; object-fit:cover; background:var(--surface-alt); }
  .acts { margin-top:18px; padding:22px 24px; }
  .act code { font-size:11px; }
  .act { color:inherit; text-decoration:none; display:flex; align-items:center; gap:14px; padding:9px 0; font-size:14px; }
  .act .img { width:46px; height:36px; border-radius:6px; flex:none; }
  .act .ic { width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); color:var(--accent); }
  .act .ic .i { width:17px; height:17px; }
  .act div { flex:1; min-width:0; }
  .act small { display:block; color:var(--muted); font-size:13px; }
  .act time { color:var(--muted); font-size:13px; white-space:nowrap; }

/* Produkt-Ergänzungen, die der Prototyp nicht braucht */
.brand img { height:40px; width:auto; max-width:150px; object-fit:contain; }
.hero-img { background-size:cover; background-position:center; }
.hero-layer { position:absolute; inset:0; background:center/cover no-repeat; opacity:0; }
.hero-layer.on { opacity:1; }
.hero-layer.in { z-index:1; transition:opacity 2s ease-in-out; }
.side form { margin:0; }
a.kpi, a.card { text-decoration:none; }
.act .n { margin-left:6px; color:var(--muted); font-size:12px; }
.pop form button { width:100%; }
.tool .status { display:inline-flex; margin-left:12px; }
/* Status-Flags wie auf den Kacheln (Prototyp) */
  .flag { width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:4px; color:#fff; }
  .flag .i, .pop .flag .i { width:13px; height:13px; stroke-width:2.6; color:inherit; }
  .f-none { background:transparent; box-shadow:inset 0 0 0 1.5px var(--flag-none); color:var(--flag-none); }
  .f-green { background:var(--flag-green); } .f-yellow { background:var(--flag-yellow); } .f-red { background:var(--flag-red); }
  .f-final { background:var(--flag-final); color:var(--on-final); }
  .f-extra { background:var(--surface-alt); color:var(--ink); }
  .st-fill { fill:currentColor; stroke:none; }
.ic-flag { background:none !important; }
.ev .flag { width:18px; height:18px; margin-top:1px; }
.ev .flag .i { width:11px; height:11px; margin:0; color:inherit; }
/* Aktivitäten: Ungelesenes wie in der Glocke hervorheben */
.act.unread > div { font-weight:600; }
/* Ganze Zeile ist ein Link (.act-link), der Gelesen-Knopf liegt darüber: Punkt, beim Zeigen ein Haken */
.act { position:relative; }
.act-link { position:absolute; inset:0; border-radius:8px; }
.act-link:focus-visible { outline:2px solid var(--accent); }
.ev-read { position:relative; z-index:1; width:28px; height:28px; flex:none; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:none; color:var(--accent); cursor:pointer; }
.ev-read::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.ev-read .i { display:none; width:16px; height:16px; margin:0; color:inherit; }
.ev-read:hover, .ev-read:focus-visible { background:color-mix(in srgb, var(--accent) 16%, transparent); }
.ev-read:hover::before, .ev-read:focus-visible::before { display:none; }
.ev-read:hover .i, .ev-read:focus-visible .i { display:block; }
.ev { grid-template-columns:auto 1fr auto; }
.ev > .ev-read { grid-column:3; grid-row:1 / span 2; align-self:center; }
.bellpop .bell-head .link { width:auto; min-height:0; padding:4px 0; border:0; background:none; color:var(--accent); font-size:13px; font-weight:500; cursor:pointer; }
.bellpop .bell-head .link:hover { text-decoration:underline; background:none; }
.bell-all { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:6px; padding:10px 6px 4px; border-top:1px solid var(--border); color:var(--accent); font-size:13px; font-weight:500; text-decoration:none; }
.bell-all .i { width:14px; height:14px; }
.acts-list.scroll { max-height:520px; overflow:auto; margin-right:-12px; padding-right:12px; overscroll-behavior:contain; }
.acts-more { margin-top:12px; }
.bell-empty { padding:14px 8px; font-size:13px; color:var(--muted); }
.changelog h3 { margin:14px 0 6px; font-size:14px; }
.changelog h4 { margin:8px 0 2px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); }
.changelog ul { margin:0; padding-left:18px; font-size:14px; line-height:1.6; color:var(--muted); }
.changelog-body { max-height:min(60vh,520px); overflow:auto; }

/* ========================================================================
   Galerieübersicht (gallery_overview.php), Vorlage 6.2 im Prototyp
   ======================================================================== */
  .phead { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin:10px 0 24px; }
  .phead h1 { margin:0 0 6px; font-size:34px; line-height:1.15; }
  .phead p { margin:0; color:var(--muted); font-size:15px; }
  .toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:22px; }
  .toolbar .chips { display:flex; flex-wrap:wrap; gap:10px; margin-right:auto; }
  .ggrid { --overview-cols:4; display:grid; grid-template-columns:repeat(var(--overview-cols),minmax(0,1fr)); grid-auto-flow:dense; gap:18px; }
  .ggrid[data-tile-size="small"] { --overview-cols:5; }
  .ggrid[data-tile-size="large"] { --overview-cols:3; }
  .gcard { display:flex; flex-direction:column; min-width:0; }
  .gcover { position:relative; aspect-ratio:16/9; border-radius:16px 16px 0 0; display:block; border:0; padding:0; width:100%; cursor:pointer; }
  .gcover-btns { position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; }
  .kebab { width:36px; height:36px; display:grid; place-items:center; border-radius:8px; background:#fff; color:#1b2430; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.2); }
  .gbody { padding:16px 18px 18px; display:grid; gap:10px; align-content:start; }
  .gbody h2 { margin:0; font-size:17px; font-weight:600; }
  .gbody h2 a { text-decoration:none; }
  .gbody h2 a:hover { text-decoration:underline; }
  .gbody .badges { display:flex; flex-wrap:wrap; gap:6px; }
  .gbody p { margin:0; font-size:14px; line-height:1.5; color:var(--muted); display:-webkit-box; line-clamp:2; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .gmeta { display:flex; gap:22px; font-size:13px; color:var(--muted); }
  .gmeta span { display:flex; align-items:center; gap:8px; }
  .gmeta .i { width:16px; height:16px; }
  .subs-btn { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; margin-top:auto; padding:0 18px; border:0; border-top:1px solid var(--border); background:none; font-size:13px; font-weight:500; color:var(--accent); border-radius:0 0 16px 16px; }
  .subs-btn .i { width:16px; height:16px; transition:transform .15s; }
  .subs-btn[aria-expanded="true"] .i { transform:rotate(180deg); }
  .subrow { grid-column:1/-1; display:grid; grid-template-columns:repeat(var(--overview-cols,3),minmax(0,1fr)); gap:14px; margin-left:14px; padding:4px 0 6px 20px; border-left:2px solid var(--border); }
  .subrow .gcover { aspect-ratio:16/7; }
  .subrow .gbody { padding:12px 14px 14px; gap:6px; }
  .subrow .gbody h2 { font-size:15px; }
  /* Liste */
  body[data-view="list"] .ggrid, body[data-view="list"] .subrow { grid-template-columns:1fr; }
  body[data-view="list"] .gcard { flex-direction:row; flex-wrap:wrap; align-items:center; }
  body[data-view="list"] .gcover { width:150px; aspect-ratio:3/2; border-radius:15px 0 0 15px; }
  body[data-view="list"] .gcover-btns { top:6px; left:6px; right:6px; }
  body[data-view="list"] .gcover-btns .pop { left:0; right:auto; }
  body[data-view="list"] .gbody { flex:1; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
  body[data-view="list"] .gbody p { display:none; }
  body[data-view="list"] .subs-btn { flex-basis:100%; }

/* Produkt: Karte + Untergalerien als Einheit (display:contents), damit Sortieren ganze Äste verschiebt */
.gitem { display:contents; }
.gcover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.gcover.empty { background:var(--surface-alt); display:grid; place-items:center; color:var(--muted); font-size:13px; }
.gcover > a { position:absolute; inset:0; border-radius:inherit; }
.gcover-btns { z-index:2; }
.gcover-btns .pop { z-index:40; }
.parent-hint { display:none; font-size:12px; color:var(--muted); }
/* Gefiltert: flach statt Baum, jede passende Galerie als eigene Karte mit Hinweis auf die Elterngalerie */
.ggrid.flat .subrow, .ggrid.flat .subrow[hidden] { display:contents !important; }
.ggrid.flat .subs-btn { display:none; }
.ggrid.flat .parent-hint { display:block; }
.ggrid:not(.flat) .gitem > article[hidden] ~ .subrow { display:none !important; }
.ggroup { grid-column:1/-1; margin:14px 0 -4px; font-size:15px; font-weight:600; }
.ggroup:first-child { margin-top:0; }
.empty-note { grid-column:1/-1; padding:40px 20px; text-align:center; color:var(--muted); }
.org-count { min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:700; display:grid; place-items:center; }
.org-count:empty { display:none; }

/* Inspector (Overlay; angeheftet eigene Spalte, siehe unten) */
  .scrim { position:absolute; inset:0; z-index:39; }
  .insp { position:absolute; z-index:40; top:12px; right:12px; bottom:12px; width:390px; max-width:calc(100% - 24px); display:flex; flex-direction:column; background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-pop); overflow:hidden; }
  .insp--below-top { top:80px; }
  .insp--lb { top:64px; bottom:88px; right:16px; }
  .insp-head { position:relative; padding:22px 24px 0; }
  .insp-head .icon-btn { position:absolute; top:14px; right:14px; }
  .eyebrow { font-size:12px; color:var(--muted); }
  .insp-head .pin-btn { right:62px; }
  .pin-btn[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); }
  .insp-title { margin:4px 96px 16px 0; font-size:28px; line-height:1.15; overflow-wrap:anywhere; }
  .tabs { display:flex; border-bottom:1px solid var(--border); }
  .tabs button { flex:1; height:44px; margin-bottom:-1px; border:0; border-bottom:2px solid transparent; background:none; color:var(--muted); font-size:14px; }
  .tabs [aria-selected="true"] { color:var(--ink); font-weight:600; border-bottom-color:var(--accent); }
  .insp-body { flex:1; min-height:0; overflow:auto; padding:20px 24px 24px; }
  .insp-body h4 { margin:22px 0 10px; font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:space-between; }
  .insp-body h4:first-child { margin-top:0; }
  .rule { border:0; border-top:1px solid var(--border); margin:18px 0; }
.insp { position:fixed; top:12px; right:12px; bottom:12px; }
.scrim { position:fixed; background:rgba(0,0,0,.18); }
.insp-head .i { width:18px; height:18px; }
.insp-body h4 .icon-btn { width:32px; height:32px; margin:-6px -6px -6px 0; }
.insp-body h4 .icon-btn .i { width:18px; height:18px; }

/* Organisieren › Verwalten: Zeilen mit ↑↓ / Umbenennen / Löschen, Eingabezeile für Anlegen + Umbenennen */
.org-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; font-size:13px; }
.org-row { display:flex; align-items:center; gap:12px; min-height:40px; padding-left:8px; font-size:14px; }
.org-row > .i { width:18px; height:18px; flex:none; color:var(--muted); }
.org-row > span:first-of-type { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.org-edit { display:inline-flex; gap:2px; }
.org-edit .icon-btn { width:32px; height:32px; border-radius:8px; color:var(--muted); }
.org-edit .icon-btn:hover:not([disabled]) { background:var(--surface-alt); color:var(--ink); }
.org-edit .icon-btn[disabled] { opacity:.3; }
.org-edit .del:hover:not([disabled]) { color:var(--danger); }
.org-edit .i { width:16px; height:16px; }
.org-edit .up { transform:rotate(180deg); }
.org-tag { gap:4px; padding-right:4px; }
.org-tag .org-edit .icon-btn { width:28px; height:28px; border-radius:50%; }
.org-tag .org-edit .icon-btn:hover:not([disabled]) { background:var(--surface); }
.org-tag .org-edit .i { width:15px; height:15px; }
.org-input { display:flex; align-items:center; gap:6px; margin:0 0 8px; }
.org-input input, .addrow input { flex:1; min-width:0; height:38px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-ctl); background:var(--surface); color:inherit; font:inherit; font-size:14px; }
.org-input input:focus, .addrow input:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.org-input .icon-btn { width:38px; height:38px; border-radius:var(--radius-ctl); background:var(--primary); color:var(--on-primary); }
.org-empty { margin:0; font-size:13px; }

/* Kategorie/Tags einer Galerie */
.dlg-sm { width:min(480px, calc(100% - 32px)); }
.dlg-h { margin:18px 0 10px; font-size:13px; font-weight:600; }
.dlg-h:first-of-type { margin-top:4px; }
.addrow { display:flex; gap:8px; margin:12px 0 4px; }
.addrow .btn { height:38px; }
.dlg .dlg-foot { margin-top:22px; }

/* Formular in Dialogen (Neue Galerie) */
.form-label { display:block; margin:0 0 8px; padding:0; font-size:13px; font-weight:600; }
.input { width:100%; height:44px; padding:0 14px; border:1px solid var(--border); border-radius:var(--radius-ctl); background:var(--surface); color:inherit; font:inherit; font-size:15px; }
.input:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.kind-opts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0 0; padding:0; border:0; }
.kind-opts label { position:relative; display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--border); border-radius:12px; cursor:pointer; }
.kind-opts label:has(:checked) { border-color:var(--accent); background:var(--accent-soft); }
.kind-opts label:has(:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.kind-opts input { position:absolute; opacity:0; pointer-events:none; }
.kind-opts .i { width:20px; height:20px; flex:none; margin-top:1px; color:var(--muted); }
.kind-opts label:has(:checked) .i { color:var(--accent); }
.kind-opts b { display:block; font-size:14px; font-weight:600; }
.kind-opts small { display:block; margin-top:2px; font-size:12px; line-height:1.4; color:var(--muted); }
.form-error { margin:14px 0 0; font-size:13px; color:var(--danger); }
@media (max-width:480px) { .kind-opts { grid-template-columns:1fr; } }

/* Tags auf der Karte (Klick filtert) */
.gmeta { flex-wrap:wrap; row-gap:4px; }
.gmeta span { white-space:nowrap; }
.gtags { display:flex; flex-wrap:wrap; gap:4px 10px; }
.gtags:empty { display:none; }
.gtag { padding:0; border:0; background:none; color:var(--muted); font-size:12px; cursor:pointer; }
.gtag:hover { color:var(--accent); text-decoration:underline; }

/* Offenes Kartenmenü liegt über den folgenden Karten (sonst gleiche Ebene, DOM-Reihenfolge gewinnt) */
.gcover-btns:has(.pop:not(.hidden)) { z-index:41; }

/* Angeheftet: Inspector als eigene Spalte, kein Scrim, Inhalt bleibt bedienbar. Nur Desktop */
@media (min-width:761px) {
  body[data-pin="true"] .scrim[data-org-close] { display:none; }
  body[data-pin="true"] .insp:not([hidden]) { top:0; right:0; bottom:0; z-index:30; border:0; border-left:1px solid var(--border); border-radius:0; box-shadow:none; }
  body[data-pin="true"] .shell:has(.insp:not([hidden])) { padding-right:390px; }
  body[data-pin="true"] .shell:has(.insp:not([hidden])) :is(.ggrid, .subrow) { grid-template-columns:repeat(var(--overview-cols,3),minmax(0,1fr)); }
  body[data-pin="true"][data-view="list"] .shell:has(.insp:not([hidden])) :is(.ggrid, .subrow) { grid-template-columns:1fr; }
  /* Angedockt ist es eng: Filter-Chips (außer „Alle") nur mit Symbol + Zahl, Name bleibt für Screenreader und im Tooltip */
  body[data-pin="true"] .shell:has(.insp:not([hidden])) .chip[data-chip]:not([data-chip="all"]) .cl { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  body[data-pin="true"] .shell:has(.insp:not([hidden])) .chip[data-chip]:not([data-chip="all"]) { padding-left:12px; }
}
@media (max-width:760px) { .pin-btn { display:none; } }

/* Kategorien/Tags, aktive Filter, Verschieben-Baum */
  .catlist { display:grid; gap:2px; }
  .catlist button { display:flex; align-items:center; gap:12px; min-height:40px; padding:0 8px; border:0; border-radius:8px; background:none; font-size:14px; text-align:left; }
  .catlist button:hover { background:var(--surface-alt); }
  .catlist .i { width:18px; height:18px; color:var(--muted); }
  .catlist b { margin-left:auto; font-weight:500; }
  .catlist button[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); }
  .catlist button[aria-pressed="true"] .i { color:var(--accent); }
  button.tag { border:0; cursor:pointer; }
  .tag[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }
  .tag[aria-pressed="true"] .n { color:inherit; }
  .activefilters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-10px 0 20px; }
  .activefilters:empty { display:none; }
  .activefilters .chip { padding-right:12px; background:var(--accent-soft); color:var(--accent); border-color:transparent; }
  .link-btn { border:0; background:none; padding:0 6px; min-height:40px; color:var(--muted); font-size:13px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
  .tree { margin:0 0 16px; padding:6px; border:1px solid var(--border); border-radius:12px; max-height:320px; overflow:auto; display:grid; }
  .tree label { display:flex; align-items:center; gap:10px; min-height:40px; padding:0 10px; border-radius:8px; font-size:14px; cursor:pointer; }
  .tree label:hover { background:var(--surface-alt); }
  .tree .d1 { padding-left:34px; }

@media (max-width:760px) {
  .art { height:auto; aspect-ratio:12/5; }
  .ggrid, .subrow { grid-template-columns:1fr; }
  .subrow { margin-left:0; padding-left:14px; }
  .phead { flex-direction:column; }
  .phead h1 { font-size:28px; }
  .chip { min-height:44px; }
  .toolbar { gap:10px; }
  .toolbar .lbl { display:none; }
  .toolbar .chips { flex:0 0 calc(100% + 32px); flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:2px 16px 4px; scrollbar-width:none; }
  .toolbar .chips::-webkit-scrollbar { display:none; }
  /* Menüs mind. 140 px breit: bei zwei Menüs rutschen Ansicht und Organisieren in eine eigene Zeile, statt die Beschriftung auf einen Buchstaben zu kürzen */
  .toolbar > .menu { flex:1 1 140px; min-width:0; }
  .toolbar > .menu > summary { width:100%; justify-content:space-between; }
  .toolbar > .btn { width:44px; padding:0; }
  body[data-view="list"] .gcard { flex-wrap:wrap; align-items:stretch; }
  body[data-view="list"] .gcover { width:104px; aspect-ratio:auto; min-height:104px; border-radius:15px 0 0 15px; }
  body[data-view="list"] .gcover-btns { top:4px; left:4px; right:auto; }
  body[data-view="list"] .gbody { flex:1 1 0; min-width:0; grid-template-columns:1fr; gap:6px; padding:12px 14px; align-content:center; }
  body[data-view="list"] .gbody h2 { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  body[data-view="list"] .gmeta { gap:14px; }
  .insp { inset:0; width:auto; max-width:none; border-radius:0; border:0; z-index:70; }
}
/* Mobil-Durchgang Etappe C: Menüs im Viewport, Touch-Ziele 44 px */
@media (max-width:760px) {
  .pop { max-width:calc(100vw - 32px); }
  .toolbar > .menu .pop { left:0; right:auto; }
  .toolbar > .menu > summary > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .heart, .kebab, .sublist .skebab { width:44px; height:44px; }
  .gtags { gap:0 14px; margin:-10px 0; }
  .gtag { min-height:44px; }
  .ev-read { width:44px; height:44px; }
}
/* Querformat mit wenig Höhe: ganze Seitenleiste scrollt statt nur der Navigation */
@media (min-width:761px) and (max-height:560px) {
  .side { overflow-y:auto; }
  .side .nav { flex:none; overflow:visible; }
}

/* Mobil (im Prototyp @container frame max-width:760px) */
@media (max-width:760px) {
  .shell { grid-template-columns:minmax(0,1fr); }
  .shell > .side { display:flex; position:fixed; z-index:60; inset:0 auto 0 0; width:min(290px,86%); transform:translateX(-105%); transition:transform .2s; box-shadow:var(--shadow-pop); }
  body[data-nav="true"] .side { transform:none; }
  .top .avatar { display:none; }
  .menu-btn { display:grid; }
  .top { height:60px; padding:0 12px; gap:8px; }
  .top .crumb { display:none; }
  .icon-btn { width:44px; height:44px; }
  .main { padding:8px 16px 110px; }
  .hero { flex-direction:column; align-items:stretch; }
  .hero-img { position:relative; inset:auto; height:140px; -webkit-mask-image:linear-gradient(0deg, transparent, rgba(0,0,0,0.028) 7%, rgba(0,0,0,0.104) 14%, rgba(0,0,0,0.216) 21%, rgba(0,0,0,0.352) 28%, rgba(0,0,0,0.500) 35%, rgba(0,0,0,0.648) 42%, rgba(0,0,0,0.784) 49%, rgba(0,0,0,0.896) 56%, rgba(0,0,0,0.972) 63%, #000 70%); mask-image:linear-gradient(0deg, transparent, rgba(0,0,0,0.028) 7%, rgba(0,0,0,0.104) 14%, rgba(0,0,0,0.216) 21%, rgba(0,0,0,0.352) 28%, rgba(0,0,0,0.500) 35%, rgba(0,0,0,0.648) 42%, rgba(0,0,0,0.784) 49%, rgba(0,0,0,0.896) 56%, rgba(0,0,0,0.972) 63%, #000 70%); order:-1; }
  .hero-copy { padding:0 20px 22px; }
  .hero h1 { font-size:30px; }
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .kpi { gap:10px; padding:14px; }
  .kpi > .i:first-child { width:22px; height:22px; flex:none; }
  .kpi > span { min-width:0; }
  .kpi small { font-size:13px; overflow-wrap:anywhere; }
  .kpi .i:last-child:not(:first-child) { display:none; }
  .tools { grid-template-columns:1fr; }
  .btn-sm { min-height:44px; }
  .bellpop { width:min(340px, calc(100vw - 24px)); }
  .act { flex-wrap:wrap; gap:4px 12px; }
  .act .ic { display:none; }
  .act time { flex-basis:100%; padding-left:58px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .shell > .side { transition:none; } }


/* ======================================================================
   Galerieseite (gallery.php, Schritt 4 Etappe 1): Kopf .gtop + Icon-Schiene .rail um das bisherige Tailwind-Layout.
   Kein body.ui hier: die Tailwind-Inhalte der Seite bleiben unverändert, bis sie in den nächsten Etappen umziehen.
   ====================================================================== */
.gwrap { --gtop-h:68px; }
.gtop, .gwrap > .side, .rail { font-family:var(--font-ui); color:var(--ink); }
.gtop { position:sticky; top:0; z-index:45; display:flex; height:var(--gtop-h); background:var(--bg); border-bottom:1px solid var(--border); }
.gtop .brand-cell { width:78px; flex:none; display:grid; place-items:center; border-right:1px solid var(--border); }
.gtop .brand-cell .brand-logo { display:grid; place-items:center; }
.gtop .brand-cell .brand-logo img { height:40px; width:auto; max-width:62px; object-fit:contain; }
.gtop .top { flex:1; min-width:0; height:100%; padding:0 24px; gap:10px; }
.gtop .crumb { gap:6px; }
.gtop .crumb > .i { flex:none; }
.crumb-menu > summary { display:flex; align-items:center; gap:4px; cursor:pointer; border-radius:8px; padding:4px 6px; }
@media (max-width:1023px) { .gtop .crumb-menu > summary { max-width:220px; } }
.crumb-menu > summary:hover { background:var(--surface-alt); color:var(--ink); }
.crumb-menu > summary span, .crumb-menu > summary b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crumb .chev { width:14px; height:14px; }
.crumb .pop { left:0; right:auto; max-height:60vh; overflow:auto; }
.crumb .pop a[aria-current="page"] { color:var(--muted); pointer-events:none; }
.crumb .pop a.sub { padding-left:28px; }
.help-pop { width:300px; padding:12px 14px; font-size:13px; line-height:1.5; color:var(--muted); }
.help-pop p { margin:0; }
.help-pop b { color:var(--ink); }
.help-pop kbd { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 4px; border:1px solid var(--border); border-radius:5px; font:500 11px var(--font-ui); color:var(--ink); background:var(--bg); }
.gtop summary.avatar-sum { cursor:pointer; list-style:none; }
.preview-pill { display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 4px 0 14px; border-radius:999px; background:var(--ink); color:var(--surface); font-size:13px; white-space:nowrap; }
.preview-pill .btn { height:32px; border-radius:999px; color:var(--ink); }
.gcols { flex:1; display:flex; align-items:stretch; }
.gcontent { flex:1; min-width:0; display:flex; flex-direction:column; }
.rail { position:sticky; top:var(--gtop-h); align-self:flex-start; width:78px; height:calc(100dvh - var(--gtop-h)); flex:none; display:flex; flex-direction:column; gap:4px; padding:12px 0; border-right:1px solid var(--border); background:var(--bg); overflow:auto; }
.rail a { display:flex; flex-direction:column; align-items:center; gap:5px; margin:0 6px; padding:10px 0; border-radius:12px; font-size:11px; color:var(--muted); text-decoration:none; text-align:center; }
.rail a:hover { color:var(--ink); background:var(--surface-alt); }
.rail a[aria-current="page"] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-card); }
.rail .push { margin-top:auto; }
.gwrap > .side { display:none; }
@media (max-width:760px) {
  .gwrap { --gtop-h:60px; }
  .rail { display:none; }
  .gwrap > .side { display:flex; position:fixed; z-index:70; inset:0 auto 0 0; width:min(290px,86%); transform:translateX(-105%); transition:transform .2s; box-shadow:var(--shadow-pop); }
  .gtop .brand-cell { width:auto; padding-left:6px; display:flex; align-items:center; gap:4px; border-right:0; }
  .gtop .brand-cell .brand-logo { display:none; }
  .gtop .brand-cell:not(:has(.menu-btn)) .brand-logo { display:grid; margin-left:10px; }
  .gtop .top { padding:0 8px 0 4px; gap:4px; }
  .gtop .top .crumb { display:flex; }
  .gtop .crumb-adm > :not(:last-child) { display:none; }
  .gtop .crumb-menu > summary { max-width:140px; }
  .gtop .lbl, .gtop .kbd-help { display:none; }
  .gtop .btn-sm { min-height:40px; padding:0 10px; }
  .gtop .avatar-sum { display:none; }
}
@media (prefers-reduced-motion:reduce) { .gwrap > .side { transition:none; } }

/* ----------------------------------------------------------------------
   Galerieseite, Etappe 2: Kopf .ghead, klebende Filterleiste .gbar, Status-Reiter auf den Kacheln.
   Das Raster (#galleryGrid) liegt im Tailwind-Container px-4 py-6 / lg:px-10 lg:py-10 auf main.bg-gray-50;
   deshalb hat .gbar vorerst gray-50 statt var(--bg). Mit Etappe 3 (main ohne Tailwind) auf var(--bg) umstellen.
   ---------------------------------------------------------------------- */
.ghead, .gbar { font-family:var(--font-ui); color:var(--ink); }
.ghead { display:flex; align-items:flex-start; gap:14px; margin:0 0 12px; }
.ghead-copy { flex:1; min-width:0; }
.ghead h1 { margin:0 0 6px; font-size:38px; line-height:1.15; }
.ghead p { margin:0; color:var(--muted); font-size:15px; }
.ghead .ginfo { margin-top:6px; font-size:13px; }
.gbar { position:sticky; top:var(--gtop-h); z-index:40; margin:0 -16px 16px; padding:10px 16px; background:var(--color-gray-50, #f9fafb); border-bottom:1px solid transparent; transition:border-color .15s, box-shadow .15s; }
.gbar.stuck { border-bottom-color:var(--border); box-shadow:0 6px 16px -12px rgba(0,0,0,.35); }
.gbar-row { display:flex; align-items:flex-start; gap:12px; }
.gfilter { flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.gf-on { display:inline-flex; gap:3px; }
.gf-on:empty { display:none; }
.gf-on .flag { width:20px; height:20px; border-radius:5px; }
.gf-on .flag .i { width:12px; height:12px; }
.fmenu > summary { cursor:pointer; }
.fmenu > summary .chev { width:14px; height:14px; color:var(--muted); }
.fpop { left:0; right:auto; width:290px; }
.fpop h5 { margin:8px 10px 4px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.fpop hr { margin:6px 0; border:0; border-top:1px solid var(--border); }
.fpop button { cursor:pointer; color:var(--ink); }
.fpop button:hover { background:var(--surface-alt); }
.fpop button > span:not(.flag) { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fpop button small { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.fpop button .ck { width:16px; height:16px; color:var(--accent); visibility:hidden; }
.fpop [aria-pressed="true"] { font-weight:600; }
.fpop [aria-pressed="true"] .ck { visibility:visible; }
.fpop .fpop-foot { display:flex; justify-content:space-between; align-items:center; padding:6px 10px 2px; font-size:12px; color:var(--muted); }
.fpop .fpop-foot .icon-btn { width:32px; height:32px; min-height:32px; padding:0; justify-content:center; }
@media (min-width:1024px) { .gbar { margin:0 -40px 16px; padding:10px 40px; } }
@media (max-width:760px) {
  .ghead h1 { font-size:28px; }
  .gbar { padding:8px 16px; }
}

/* Status-Reiter: Farbe je Status, Symbol + galerie-eigenes Label. Klassen .flag-btn/.flag-text/.flag-icon hängen an app.js */
#galleryGrid .group { --fc:rgba(31,35,40,.45); --on-fc:#fff; }
#galleryGrid .group[data-status="green"] { --fc:var(--flag-green); }
#galleryGrid .group[data-status="yellow"] { --fc:var(--flag-yellow); }
#galleryGrid .group[data-status="red"] { --fc:var(--flag-red); }
#galleryGrid .group[data-status="final"] { --fc:var(--flag-final); --on-fc:var(--on-final); }
#galleryGrid .overlay-btn.flag-btn { width:auto; max-width:100%; height:24px; display:flex; align-items:center; gap:5px; padding:1px 10px 0 8px; border:0; border-radius:4px; background:var(--fc); color:var(--on-fc); box-shadow:0 2px 6px rgba(0,0,0,.18); font:500 12px var(--font-ui); transform:none; transition:filter .15s, opacity .15s; }
#galleryGrid .overlay-btn.flag-btn:hover { filter:brightness(1.08); }
#galleryGrid .flag-btn .flag-icon { width:12px; height:12px; stroke-width:2.6; }
#galleryGrid .flag-btn .flag-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#galleryGrid .group:not([data-status]) .flag-btn, #galleryGrid .group[data-status="none"] .flag-btn { -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:none; }
#galleryGrid .group[data-status="none"] .flag-btn .flag-icon { display:none; }
#galleryGrid .group[data-status="red"] .flag-btn { opacity:.85; }
/* Desktop: Reiter hängt oben links von der Kante ins Bild, ohne Status erst beim Hover */
#galleryGrid .ph-flag { position:absolute; z-index:10; top:0; left:10px; max-width:calc(100% - 60px); }
#galleryGrid .ph-flag .flag-btn { border-radius:0 0 4px 4px; }
#galleryGrid .group[data-status="none"] .ph-flag .flag-btn { opacity:0; }
#galleryGrid .group[data-status="none"]:hover .ph-flag .flag-btn, #galleryGrid .group .ph-flag:has(.flag-panel:not(.hidden)) .flag-btn, #galleryGrid .ph-flag .flag-btn:focus-visible { opacity:1; }
/* Touch: „Markieren" nur als Symbol */
body[data-ui="touch"] #galleryGrid .group[data-status="none"] .flag-btn .flag-text { display:none; }
body[data-ui="touch"] #galleryGrid .group[data-status="none"] .flag-btn .flag-icon { display:block; }
/* Status-Menü */
#galleryGrid .flag-panel .flag { width:18px; height:18px; }
#galleryGrid .flag-panel .flag .i { width:11px; height:11px; }
#galleryGrid .flag-panel [aria-pressed="true"] { background:var(--surface-alt); font-weight:600; }
/* „Eher nicht" tritt zurück: Schleier + Entsättigung über dem Bild, Reiter und Overlay bleiben voll; Hover holt es zurück */
#galleryGrid .group[data-status="red"] .image-frame::after { content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; background:color-mix(in srgb, var(--surface) 50%, transparent); -webkit-backdrop-filter:saturate(.15); backdrop-filter:saturate(.15); pointer-events:none; transition:opacity .4s; }
#galleryGrid .group[data-status="red"]:hover .image-frame::after { opacity:.15; }
/* Schmale Kacheln: nur Symbol */
#galleryGrid .image-frame { container-type:inline-size; }
@container (max-width:150px) {
  #galleryGrid .flag-btn .flag-text { display:none; }
  #galleryGrid .flag-btn .flag-icon { display:block !important; }
  #galleryGrid .overlay-btn.flag-btn { padding:1px 8px 0; }
}

/* ----------------------------------------------------------------------
   Galerieseite, Etappe 3: Inspector (ersetzt die alte Sidebar), Aktionen in der .gbar, vollständige Shortcut-Hilfe.
   Inspector-Innenleben wie im Prototyp, auf .insp--gallery begrenzt (daneben liegen noch Tailwind-Teile).
   ---------------------------------------------------------------------- */
.insp--gallery { top:calc(var(--gtop-h) + 12px); z-index:44; font-family:var(--font-ui); font-size:15px; }
/* Über der klebenden .gbar (40), unter dem Kopf .gtop (45) */
.gwrap .scrim[data-insp-close] { z-index:43; }
.insp--gallery .hint { margin:8px 0 0; font-size:13px; color:var(--muted); }
.insp--gallery .hint .i { width:15px; height:15px; vertical-align:-3px; }
.insp--gallery .hint a { color:inherit; text-decoration:underline; }
.insp--gallery .cover { position:relative; aspect-ratio:16/8; border-radius:10px; overflow:hidden; background:var(--surface-alt); }
.insp--gallery .cover img { width:100%; height:100%; object-fit:cover; display:block; }
.insp--gallery .cover-label { position:absolute; left:12px; top:12px; height:24px; padding:0 10px; display:grid; place-items:center; border-radius:99px; background:rgba(255,255,255,.92); color:#1b2430; font-size:12px; font-weight:600; }
.insp--gallery .note { padding:12px 14px; border-radius:10px; background:var(--surface-alt); font-size:14px; line-height:1.55; color:var(--muted); overflow-wrap:anywhere; }
.insp--gallery .desc-form textarea { height:auto; max-width:none; padding:10px 12px; resize:vertical; line-height:1.5; }
.insp--gallery .desc-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.insp--gallery .inp { width:100%; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; font-size:14px; }
.insp--gallery .fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.insp--gallery .fields label { display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
.insp--gallery .field { display:flex; align-items:center; gap:10px; width:100%; height:44px; padding:0 12px; border:0; border-radius:10px; background:var(--surface-alt); color:var(--ink); font:inherit; font-size:13px; }
.insp--gallery select.field { cursor:pointer; }
.insp--gallery .field .i { width:17px; height:17px; }
.insp--gallery .stats { display:grid; grid-template-columns:repeat(4,1fr); margin-top:20px; padding:14px 0; border-block:1px solid var(--border); text-align:center; }
.insp--gallery .stats div { display:grid; justify-items:center; gap:3px; font-size:12px; color:var(--muted); }
.insp--gallery .stats div + div { border-left:1px solid var(--border); }
.insp--gallery .stats b { font-size:17px; color:var(--ink); }
.insp--gallery .stats .i { color:var(--ink); }
.insp--gallery .coll { display:flex; align-items:center; gap:12px; padding:8px 0; }
.insp--gallery .coll img { width:72px; height:48px; border-radius:8px; flex:none; object-fit:cover; }
.insp--gallery .coll > div { flex:1; min-width:0; font-size:14px; font-weight:500; }
.insp--gallery .coll small { display:block; font-weight:400; color:var(--muted); font-size:13px; }
.insp--gallery .actions { display:grid; gap:8px; }
.insp--gallery .actions .btn { justify-content:flex-start; }
.insp--gallery .kv { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px 12px; font-size:14px; }
.insp--gallery .kv .i { width:18px; height:18px; color:var(--muted); }
.insp--gallery .kv span { color:var(--muted); }
.insp--gallery .kv b { font-weight:500; text-align:right; }
.insp--gallery .copy { display:flex; gap:8px; }
.insp--gallery .copy .field { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:block; line-height:44px; }
.insp--gallery .badge.off .sdot { background:var(--muted); }
.insp--gallery .btn-block { width:100%; }
.insp--gallery textarea[readonly] { width:100%; }
/* Angeheftet: Spalte unter dem Kopf, der Inhalt rückt zur Seite (Regeln der Übersicht, hier mit Kopfhöhe) */
@media (min-width:761px) {
  body[data-pin="true"] .insp--gallery:not([hidden]) { top:var(--gtop-h); }
  body[data-pin="true"] .gwrap:has(.insp--gallery:not([hidden])) .gcontent { padding-right:390px; }
}
@media (max-width:760px) {
  .insp--gallery { inset:0; width:auto; max-width:none; border:0; border-radius:0; z-index:70; }
}

/* Aktionen rechts in der Filterleiste; wird es eng, nur noch Symbole (Name bleibt für Screenreader) */
.gbar .ghead-actions { flex:none; display:flex; align-items:center; gap:10px; }
.gbar .ghead-actions .js-dropzone { cursor:pointer; }
.gbar .ghead-actions .btn:disabled { opacity:.5; }
@media (max-width:1280px) {
  .gbar .ghead-actions .lbl { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .gbar .ghead-actions .btn:not(.btn-dark) { padding-inline:0; width:44px; }
}
@media (max-width:760px) {
  /* Filter und Details/Collections nur als Symbol, damit die Leiste einzeilig bleibt; Umbruch bleibt Rückfall */
  .gbar-row { flex-wrap:wrap; gap:8px; }
  .gbar .gfilter { flex:0 1 auto; }
  .gbar .lbl-m { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .gbar .fmenu > summary { min-width:44px; padding-inline:10px; gap:4px; justify-content:center; }
  .gbar .fmenu > summary .chev { display:none; }
  .gbar .ghead-actions { gap:6px; }
  .gbar .ghead-actions .btn-dark { width:44px; padding-inline:0; justify-content:center; }
}

/* Shortcut-Hilfe: zwei Gruppen, Taste links, Beschreibung rechts */
.help-pop { width:340px; max-height:min(70vh,560px); overflow:auto; }
.help-pop h5 { margin:6px 0 6px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.help-pop h5 + dl { margin-top:0; }
.help-pop dl { display:grid; grid-template-columns:8.5em 1fr; gap:6px 12px; margin:0 0 12px; align-items:center; }
.help-pop dt { color:var(--ink); white-space:nowrap; font-size:12px; }
.help-pop dd { margin:0; display:flex; align-items:center; gap:6px; }
.help-pop dd .flag { width:16px; height:16px; }
.help-pop dd .flag .i { width:10px; height:10px; }
.help-pop kbd + kbd { margin-left:2px; }

/* ----------------------------------------------------------------------
   Galerieseite, Nachbesserung Etappe 2/3 (Feedback 24.09.)
   ---------------------------------------------------------------------- */
/* Statusmenü = .pop.flagpop wie im Prototyp; am Reiter öffnet es nach rechts */
#galleryGrid .flag-panel { top:calc(100% + 6px); min-width:210px; font-family:var(--font-ui); }
#galleryGrid .ph-flag .flag-panel { left:0; right:auto; }
#galleryGrid .flagpop kbd { margin-left:auto; color:var(--muted); font:500 12px var(--font-ui); }
/* Beim Setzen baut sich der Reiter diagonal auf, von oben links nach unten rechts */
#galleryGrid .group.play .flag-btn { animation:tab-sweep .55s cubic-bezier(.5,0,.2,1) both; }
@keyframes tab-sweep { from { clip-path:polygon(0 0,0 0,0 0); } to { clip-path:polygon(0 0,230% 0,0 230%); } }
@media (prefers-reduced-motion:reduce) { #galleryGrid .group.play .flag-btn { animation:none; } }
/* Kacheln: Rundung wie im Prototyp (4px); das volle Kachel-Redesign folgt */
#galleryGrid .image-frame, #galleryGrid .image-clip { border-radius:4px; }
/* Art: Feld mit Symbol, Wert und Chevron; das native select liegt unsichtbar darüber (Tastatur + Mobil-Auswahl bleiben) */
.insp--gallery .field-select { position:relative; cursor:pointer; }
.insp--gallery .field-select .chev { margin-left:auto; color:var(--muted); }
.insp--gallery .field-select select { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font:inherit; }
.insp--gallery .field-select:has(select:focus-visible) { outline:2px solid var(--accent); outline-offset:1px; }
.insp--gallery .field { white-space:nowrap; min-width:0; }
/* Debug-Chips in der .gbar (nur mit Debug-Schalter) */
.gbar .dbg-chips { margin-top:8px; font:11px/1.4 ui-monospace, Menlo, monospace; }
/* Headerbild: Titel + Beschreibung im Bild (Prototyp .ghero-copy); ohne Headerbild steht beides in .ghead */
#hero .ghero-copy { position:absolute; z-index:1; inset:28px 40px; color:#fff; font-family:var(--font-ui); text-shadow:0 1px 12px rgba(0,0,0,.35); pointer-events:none; }
#hero .ghero-copy > * { max-width:min(760px, 100%); }
#hero .ghero-copy h1 { margin:0 0 6px; line-height:1.15; }
#hero .ghero-copy h1.serif { font-size:38px; }
#hero .ghero-copy h1.lp-hero-title { letter-spacing:.6px; }
#hero .ghero-copy p { margin:0; font-size:15px; color:rgba(255,255,255,.9); }
#hero .ghero-copy .ginfo { margin-top:6px; font-size:13px; }
#hero .ghero-copy.is-dark { color:rgba(0,0,0,.88); text-shadow:none; }
#hero .ghero-copy.is-dark p { color:rgba(0,0,0,.75); }
@media (max-width:760px) { #hero .ghero-copy { inset:18px 16px; } #hero .ghero-copy h1.serif { font-size:28px; } }
/* Position des Titelblocks (views.title.position) – gemeinsam für #hero und die Mini-Vorschau .lsm-hero; ohne data-pos unten links */
.hero-pos { display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; }
.hero-pos[data-pos^="t"] { justify-content:flex-start; }
.hero-pos[data-pos^="m"] { justify-content:center; }
.hero-pos[data-pos$="c"] { align-items:center; text-align:center; }
.hero-pos[data-pos$="r"] { align-items:flex-end; text-align:right; }
/* Gesperrte Knöpfe im Kopf (z. B. Kundenansicht bei abgelaufenem Link) */
.gtop .btn:disabled { opacity:.45; cursor:not-allowed; }
/* Statusmenü: Einträge in Textfarbe wie im Prototyp (alte Farbvarianten entfernt) */
#galleryGrid .flagpop button { color:var(--ink); }
.insp--gallery .kv span { white-space:nowrap; }
/* Gleiche Höhe in einer Reihe: Knopf neben 44px-Feld bzw. 44px-Knopf ist ebenfalls 44px */
.insp--gallery .copy .btn { height:44px; flex:none; }
.gbar .gfilter .icon-btn { width:44px; height:44px; }

/* ----------------------------------------------------------------------
   Galerieseite, Etappe 4: Auswahl-Reiter, Bildaktionen, Kommentar-Glas, Bulk-Leiste, Collections, Collection-Modus.
   Zustände: body.has-selection (= Prototyp #frame[data-bulk]), body.collection-mode (= #frame[data-coll]);
   .group.is-selected (= .photo.picked), .group.is-col-selected (= .photo.in-coll). .overlay-btn-Grundstil (input.css) wird hier überschrieben.
   ---------------------------------------------------------------------- */
#galleryGrid .ph-pick, #galleryGrid .ph-cmt { transform:none; border:0; color:#fff; font-family:var(--font-ui); }
/* Auswahl: Gegenstück zum Status-Reiter, hängt oben rechts — neutral statt farbig, Kästchen statt Haken */
#galleryGrid .ph-pick { position:absolute; z-index:10; top:0; right:10px; width:30px; height:24px; display:grid; place-items:center; padding:0; border-radius:0 0 4px 4px; background:rgba(31,35,40,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 2px 6px rgba(0,0,0,.18); cursor:pointer; opacity:0; transition:opacity .15s, background .15s; }
#galleryGrid .ph-pick .i { width:14px; height:14px; stroke-width:2; }
#galleryGrid .ph-pick .on { display:none; }
#galleryGrid .group:hover .ph-pick, #galleryGrid .group:has(:focus-visible) .ph-pick, body.has-selection #galleryGrid .ph-pick, body[data-ui="touch"] #galleryGrid .ph-pick { opacity:1; }
#galleryGrid .ph-pick:hover { background:rgba(31,35,40,.8); }
/* Ausgewählt: Reiter wird Papier mit gefülltem Kästchen, Kachel bekommt eine feine Kontur */
#galleryGrid .group.is-selected .ph-pick { background:#fff; color:#1f2328; }
#galleryGrid .group.is-selected .ph-pick .off { display:none; }
#galleryGrid .group.is-selected .ph-pick .on { display:block; }
/* Eine Linie statt Doppelrand: der graue Kachelrand tritt zurück, die Kontur sitzt 3px außerhalb (Raster dafür gap-4) */
#galleryGrid .group.is-selected .image-frame { outline:2px solid var(--ink); outline-offset:3px; border-color:transparent; }
/* Tastatur-Cursor (.is-keyboard-focus, Pfeiltasten/S/D) ohne eigenen Rahmen */
#galleryGrid .group.is-keyboard-focus .image-frame { box-shadow:none; }
body.has-selection #galleryGrid .ph-flag, body.has-selection #galleryGrid .ph-cmt, body.collection-mode #galleryGrid .ph-flag, body.collection-mode #galleryGrid .ph-cmt { pointer-events:none; }
body.has-selection #galleryGrid .ph-actions,
body.collection-mode #galleryGrid .ph-actions, body.collection-mode #galleryGrid .ph-pick { display:none; }
body.has-selection #galleryGrid img[data-action="lightbox"], body.collection-mode #galleryGrid img[data-action="lightbox"] { cursor:pointer; }
/* Auswahl- und Collection-Modus: „Markieren“ (Status ohne Farbe) ausblenden, Flaggen geht hier nicht */
body.has-selection #galleryGrid .group:is([data-status="none"], :not([data-status])) .ph-flag,
body.collection-mode #galleryGrid .group:is([data-status="none"], :not([data-status])) .ph-flag { display:none; }
/* Collection-Modus (wie vorher): Bilder der Collection normal mit Akzent-Rahmen über allem, die übrigen gedämpft */
body.collection-mode #galleryGrid .group.is-col-selected .image-frame::before { content:""; position:absolute; inset:0; z-index:30; border:3px solid var(--accent); border-radius:inherit; pointer-events:none; }
body.collection-mode #galleryGrid .group:not(.is-col-selected) .image-frame { opacity:.65; filter:grayscale(40%); transition:opacity .2s, filter .2s; }

/* Kommentare: Glas-Reiter unten rechts */
#galleryGrid .ph-cmt { position:absolute; z-index:10; right:10px; bottom:10px; width:auto; min-width:0; display:flex; align-items:center; gap:5px; height:24px; padding:0 9px 1px 8px; border-radius:4px; background:rgba(31,35,40,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font:500 12px var(--font-ui); font-variant-numeric:tabular-nums; cursor:pointer; transition:background .15s, opacity .15s; }
#galleryGrid .ph-cmt.hidden { display:none; }
#galleryGrid .ph-cmt:hover { background:rgba(31,35,40,.8); }
#galleryGrid .ph-cmt .i { width:13px; height:13px; stroke-width:2; }
/* Offene Kommentare (Kommentar-Status, nur Admin): Punkt am Glas wie im Prototyp */
#galleryGrid .ph-cmt.unread::after { content:""; position:absolute; top:5px; left:18px; width:5px; height:5px; border-radius:50%; background:#fff; box-shadow:0 0 0 1.5px rgba(31,35,40,.75); }

/* Bildaktionen (Download, Galeriebild, Headerbild, Löschen): Glasleiste in der Bildmitte, nur beim Hover */
#galleryGrid .ph-actions { position:absolute; z-index:11; inset:0; display:grid; place-items:center; pointer-events:none; opacity:0; transition:opacity .18s; }
#galleryGrid .group:hover .ph-actions, #galleryGrid .group:has(.ph-actions :focus-visible) .ph-actions { opacity:1; }
#galleryGrid .ph-actions > div { display:flex; gap:2px; padding:3px; border-radius:6px; background:rgba(31,35,40,.6); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); pointer-events:auto; transform:translateY(4px); transition:transform .18s; }
#galleryGrid .group:hover .ph-actions > div { transform:none; }
#galleryGrid .ph-actions > div:empty { display:none; }
#galleryGrid .ph-act { position:relative; width:34px; height:30px; display:grid; place-items:center; padding:0; border:0; border-radius:4px; background:transparent; color:#fff; cursor:pointer; }
#galleryGrid .ph-act:hover, #galleryGrid .ph-act:focus-visible { z-index:1; background:rgba(255,255,255,.16); }
#galleryGrid .ph-act .i { width:16px; height:16px; }
#galleryGrid .ph-act.danger:hover { background:color-mix(in srgb, var(--flag-red) 85%, transparent); }
#galleryGrid .ph-act::after { content:attr(aria-label); position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%); padding:3px 7px; border-radius:4px; background:rgba(31,35,40,.85); color:#fff; font:500 11px var(--font-ui); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s; }
#galleryGrid .ph-act:hover::after, #galleryGrid .ph-act:focus-visible::after { opacity:1; }
/* Schmale Kacheln: Leiste als 2×2-Block, Kommentar macht beim Hover Platz */
@container (max-width:170px) {
  #galleryGrid .ph-actions > div { display:grid; grid-template-columns:repeat(2,auto); }
  #galleryGrid .ph-act:nth-child(-n+2)::after { top:auto; bottom:calc(100% + 7px); }
  #galleryGrid .group:hover .ph-cmt { opacity:0; }
}

/* Touch: kein Hover — Auswahl und „Markieren" sichtbar; Bildaktionen gibt es auf Touch in der Lightbox (⋯-Menü) */
body[data-ui="touch"] #galleryGrid .group[data-status="none"] .ph-flag .flag-btn { opacity:1; }

/* Bulk-Leiste: dunkel, unten mittig; Rechte blendet permission.js per .bulkbar-hidden aus */
.bulkbar { position:fixed; z-index:35; left:50%; bottom:24px; transform:translateX(-50%); display:flex; align-items:center; gap:4px; padding:8px 8px 8px 18px; border-radius:14px; background:#111827; color:#f9fafb; box-shadow:0 12px 32px rgba(0,0,0,.3); font:14px var(--font-ui); white-space:nowrap; }
.bulkbar.hidden, .bulkbar .bulkbar-hidden { display:none !important; }
.bulkbar > b { font-weight:600; margin-right:10px; }
.bulkbar .bb { height:40px; min-width:40px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 10px; border:0; border-radius:9px; background:none; color:inherit; font:inherit; font-size:13px; cursor:pointer; }
.bulkbar .bb:hover { background:rgba(255,255,255,.12); }
.bulkbar .bb .i { width:18px; height:18px; }
.bulkbar .sep { width:1px; height:24px; background:rgba(255,255,255,.2); margin:0 4px; }
.bulkbar .bb-flag { position:relative; }
.bulkbar .pop { min-width:0; color:var(--ink); }
.bulkbar .pop.hidden { display:none; }
.bulkbar .flagset { display:flex; gap:8px; padding:6px; }
.bulkbar .flagset .flag { width:36px; height:36px; min-height:36px; padding:0; display:grid; place-items:center; border:0; border-radius:4px; cursor:pointer; }
.bulkbar .flagset .f-none { background:transparent; }
.bulkbar .flagset .f-green { background:var(--flag-green); } .bulkbar .flagset .f-yellow { background:var(--flag-yellow); }
.bulkbar .flagset .f-red { background:var(--flag-red); } .bulkbar .flagset .f-final { background:var(--flag-final); color:var(--on-final); }
.bulkbar .flagset .flag:hover { filter:brightness(1.08); }
.bulkbar .flagset .f-none:hover { background:var(--surface-alt); }
.bulkbar .flagset .flag .i { width:18px; height:18px; color:inherit; }
@media (max-width:760px) {
  .bulkbar { left:8px; right:8px; bottom:8px; transform:none; flex-wrap:wrap; white-space:normal; padding:8px; }
  .bulkbar > b { order:-2; flex:1 0 calc(100% - 64px); margin:4px 8px; }
  .bulkbar #bulkClear { order:-1; }
  .bulkbar .sep { display:none; }
  .bulkbar .bb { min-width:44px; height:44px; }
}

/* Bulk: Collection-Auswahl (div statt <dialog>, weil app.js .hidden schaltet) */
.bcm { position:fixed; inset:0; z-index:75; display:grid; place-items:center; padding:16px; font-family:var(--font-ui); color:var(--ink); }
.bcm.hidden { display:none; }
.bcm-scrim { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.bcm-dlg { position:relative; width:min(480px, 100%); padding:20px; border-radius:16px; background:var(--surface); box-shadow:var(--shadow-pop); }
.bcm .dlg-head h2 { margin:0 0 4px; font-size:17px; }
.bcm .dlg-head .icon-btn { margin:-8px -8px 0 0; }
.bcm .dlg-foot { margin-top:18px; }
.bcm .hint { margin:0; font-size:13px; color:var(--muted); }
.bcm .hint.hidden { display:none; }
.bcm-list { display:grid; gap:6px; max-height:55vh; margin:0; padding:0; overflow:auto; list-style:none; }
.bcm-item { width:100%; display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.bcm-item:hover { background:var(--surface-alt); }
.bcm-item .i { width:18px; height:18px; color:var(--muted); flex:none; }
.bcm-item span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bcm-item small { color:var(--muted); font-size:12px; }
.bcm-item[aria-pressed="true"] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-soft); }
.bcm .btn:disabled { opacity:.45; cursor:not-allowed; }

/* Collections im Inspector (Zeilen .coll; Menü je Collection über menu_panels.js) */
.insp--gallery .coll { position:relative; }
.insp--gallery .coll .img { width:72px; height:48px; border-radius:8px; flex:none; object-fit:cover; background:var(--surface-alt); }
.insp--gallery .coll .coll-empty { display:grid; place-items:center; color:var(--muted); }
.insp--gallery .coll .coll-empty .i { width:20px; height:20px; }
.insp--gallery .coll-title { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.insp--gallery .coll-lock { display:inline-block; width:14px; height:14px; vertical-align:-2px; margin-left:4px; }
.insp--gallery .collection-star { width:14px; height:14px; margin-right:4px; vertical-align:-2px; color:var(--accent); stroke-width:2.6; }
.insp--gallery .collection-row.is-active .collection-star { display:inline-block; }
.insp--gallery .collection-row.is-active .coll-title { color:var(--accent); }
.insp--gallery .coll > .collection-menu-wrap { position:relative; flex:none; }
.insp--gallery .collection-menu-panel { min-width:220px; }
.insp--gallery .collection-menu-panel.hidden { display:none; }
.insp--gallery h4 .btn-sm { height:36px; }

/* Collection-Modus: Leiste in der klebenden .gbar */
.gbar .collbar { display:flex; align-items:center; gap:12px; margin:-10px -16px 10px; padding:10px 16px; background:var(--accent); color:var(--on-accent); font-size:14px; }
.gbar .collbar.hidden { display:none; }
.gbar .collbar > .i { width:18px; height:18px; flex:none; }
.gbar .collbar span { flex:1 1 200px; }
.gbar .collbar .btn { margin-left:auto; background:var(--on-accent); color:var(--accent); border-color:transparent; }
@media (min-width:1024px) { .gbar .collbar { margin:-10px -40px 10px; padding:10px 40px; } }
@media (max-width:760px) { .gbar .collbar { margin:-8px -16px 8px; flex-wrap:wrap; } }
/* Auswahl-Knopf: Original-Symbole icon-grid-plus/-remove (app.js tauscht sie). Sie bringen Füllung bzw. Strich selbst mit;
   der .i-Strich würde das gefüllte grid-remove zu Klötzen aufblasen */
.gbar #toggleSelectBtn .sel-ic { width:20px; height:20px; fill:none; stroke:none; }

/* ----------------------------------------------------------------------
   Galerieseite, Etappe 5: Lightbox (dunkel, über der Galerieseite). Vorlage Prototyp .lb*, auf #lightbox begrenzt.
   Eine Lightbox für Desktop und Touch (Wischen über .lb-track); Inspector .insp--lb rechts, standardmäßig zu,
   angeheftet eine eigene Spalte. Die Lightbox ist immer dunkel, ihr Inspector folgt dem Modus. Über .gtop (45).
   ---------------------------------------------------------------------- */
#lightbox { position:fixed; inset:0; z-index:50; display:grid; grid-template-rows:64px minmax(0,1fr) 88px; background:#0e1116; color:#f3f4f6; --accent:#7aa5ff; color-scheme:dark; font-family:var(--font-ui); font-size:15px; }
#lightbox.hidden, #lightbox .lb-off { display:none !important; }
:root:not([data-mode="dark"]) #lightbox :is(.insp, .pop) { color-scheme:light; }
#lightbox .lb-top { display:flex; align-items:center; gap:10px; padding:0 20px 0 30px; min-width:0; }
#lightbox .lb-top b { font-size:16px; font-weight:600; margin-right:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#lightbox .icon-btn { color:inherit; }
#lightbox .icon-btn .i { width:20px; height:20px; }
#lightbox .bb { height:40px; min-width:40px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 10px; border:0; border-radius:9px; background:none; color:inherit; font:inherit; font-size:13px; cursor:pointer; }
#lightbox .bb .i { width:18px; height:18px; }
#lightbox > :not(.insp) :is(.icon-btn, .bb):hover, #lightbox .bb[aria-pressed="true"] { background:rgba(255,255,255,.1); }
#lightbox .lb-more { position:relative; }
#lightbox .lb-more .pop { z-index:5; min-width:220px; }
#lightbox .lb-more .pop.hidden { display:none; }
#lightbox .lb-more .pop button { color:var(--ink); }
#lightbox .lb-more .pop .danger, #lightbox .lb-more .pop .danger .i { color:var(--danger); }

/* Bühne: drei Slides (vorheriges · aktuelles · nächstes), die Mitte steht bei -100 % */
#lightbox .lb-stage { position:relative; min-height:0; overflow:hidden; }
#lightbox .lb-track { display:flex; height:100%; transform:translateX(-100%); }
#lightbox .lb-slide { flex:0 0 100%; height:100%; min-width:0; display:flex; align-items:center; justify-content:center; padding:0 30px; box-sizing:border-box; }
#lightbox .lb-frame { position:relative; height:100%; max-width:100%; display:flex; align-items:center; }
#lightbox .lb-slide img:not(#lbScribbleOverlay) { display:block; max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#lightbox #lbScribbleOverlay { position:absolute; z-index:2; pointer-events:none; }
#lightbox .lb-arrow { position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:48px; height:48px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:rgba(14,17,22,.55); color:#fff; cursor:pointer; }
#lightbox .lb-arrow:hover { background:rgba(14,17,22,.8); }
#lightbox .lb-arrow .i { width:20px; height:20px; }
#lightbox .lb-arrow.prev { left:44px; } #lightbox .lb-arrow.next { right:44px; }
/* Maus: äußere 25 % des Bildes blättern (Verlauf; ohne Chevron-Zeiger, Feedback 25.09.: die Pfeil-Kreise reichen) */
#lightbox .lb-zone { position:absolute; z-index:1; top:0; bottom:0; width:50%; opacity:0; transition:opacity .16s ease; pointer-events:none; border-radius:4px; }
#lightbox .lb-zone-prev { left:0; background:linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,.05), transparent); }
#lightbox .lb-zone-next { right:0; background:linear-gradient(to left, rgba(0,0,0,.35), rgba(0,0,0,.05), transparent); }
#lightbox .lb-hover-prev .lb-zone-prev, #lightbox .lb-hover-next .lb-zone-next { opacity:1; }
#lightboxImg.lb-cur-prev, #lightboxImg.lb-cur-next { cursor:pointer; }

/* Fuß: Herunterladen, Auswählen, Status 0–4, Zähler */
#lightbox .lb-foot { display:flex; align-items:center; gap:8px; padding:0 30px; }
#lightbox .lb-flags { display:flex; gap:10px; margin-left:20px; }
#lightbox .lb-flags .flag { width:40px; height:40px; padding:0; border:0; border-radius:8px; cursor:pointer; }
#lightbox .lb-flags .flag .i { width:18px; height:18px; }
#lightbox .lb-flags .f-none { background:transparent; box-shadow:inset 0 0 0 1.5px #9ca3af; color:#9ca3af; }
#lightbox .lb-flags .f-final { box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
#lightbox .lb-flags .flag:hover { filter:brightness(1.12); }
#lightbox .lb-flags [aria-pressed="true"] { outline:2px solid #fff; outline-offset:3px; }
#lightbox .lb-count { margin-left:auto; font-size:15px; font-variant-numeric:tabular-nums; }

/* Inspector in der Lightbox: kein Scrim, Pfeile und Schließen bleiben frei */
#lightbox .insp--lb { top:64px; bottom:88px; right:16px; z-index:4; }
#lightbox .insp--lb .tabs .n { margin-left:4px; color:var(--muted); font-size:12px; font-weight:400; }
#lightbox .insp--lb .hint { margin:0; font-size:13px; color:var(--muted); }
#lightbox .insp--lb .kv { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px 12px; font-size:14px; }
#lightbox .insp--lb .kv .i { width:18px; height:18px; color:var(--muted); }
#lightbox .insp--lb .kv span { color:var(--muted); }
#lightbox .insp--lb .kv b { font-weight:500; text-align:right; }
#lightbox .insp--lb .kv .lb-status { display:flex; gap:8px; justify-content:flex-end; align-items:center; }
#lightbox .insp--lb .kv .lb-status .flag { color:#fff; }
#lightbox .insp--lb .kv .lb-status .f-none { color:var(--flag-none); }
#lightbox .insp--lb .kv .lb-status .f-final { color:var(--on-final); }
#lightbox .insp--lb .kv .lb-status .flag .i { width:13px; height:13px; color:inherit; }
#lightbox .insp--lb .coll { display:flex; align-items:center; gap:12px; padding:8px 0; }
#lightbox .insp--lb .coll .img { width:72px; height:48px; border-radius:8px; flex:none; object-fit:cover; }
#lightbox .insp--lb .coll .coll-empty { display:grid; place-items:center; background:var(--surface-alt); color:var(--muted); }
#lightbox .insp--lb .coll > div { flex:1; min-width:0; font-size:14px; font-weight:500; }
#lightbox .insp--lb .coll small { display:block; font-weight:400; color:var(--muted); font-size:13px; }
#lightbox .insp--lb .cmt-item { padding:14px 0; border-bottom:1px solid var(--border); font-size:14px; }
#lightbox .insp--lb .cmt-item:first-child { padding-top:0; }
#lightbox .insp--lb .cmt-item header { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
#lightbox .insp--lb .cmt-item header .avatar { width:28px; height:28px; font-size:10px; }
#lightbox .insp--lb .cmt-item header small { color:var(--muted); font-size:12px; }
#lightbox .insp--lb .cmt-item .cmt-del { position:static; width:32px; height:32px; margin:-6px -6px -6px auto; color:var(--muted); }
#lightbox .insp--lb .cmt-item .cmt-del:hover { background:var(--surface-alt); color:var(--danger); }
#lightbox .insp--lb .cmt-item .cmt-del .i { width:16px; height:16px; }
#lightbox .insp--lb .cmt-item p { margin:0 0 10px 38px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
#lightbox .insp--lb .cmt-tools { display:flex; flex-wrap:wrap; gap:8px; margin-left:38px; }
#lightbox .insp--lb .cmt-tools .i { width:16px; height:16px; }
#lightbox .insp--lb .cmt-tools [aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); border-color:transparent; }
/* Kommentar-Status: zwei Symbolknöpfe als Gruppe rechts, getrennt von den Scribble-Knöpfen */
#lightbox .insp--lb .cmt-tools { align-items:center; }
#lightbox .insp--lb .cmt-status { display:inline-flex; align-items:center; gap:2px; margin-left:auto; padding:2px; border:1px solid var(--border); border-radius:10px; }
#lightbox .insp--lb .cmt-status.badge { gap:5px; padding:0 8px; }
#lightbox .insp--lb .cmt-state { width:32px; height:32px; border-radius:8px; color:var(--muted); }
#lightbox .insp--lb .cmt-state:hover { background:var(--surface-alt); color:var(--ink); }
#lightbox .insp--lb .cmt-tools .cmt-state[aria-pressed="true"] { background:var(--accent); color:#fff; }
#lightbox .insp--lb .cmt-item.is-resolved p { color:var(--muted); }
#lightbox .insp--lb .compose { margin-top:16px; display:grid; gap:10px; }
#lightbox .insp--lb .compose .inp { height:44px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; font-size:14px; }
#lightbox .insp--lb .compose textarea { min-height:80px; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink); resize:vertical; font:inherit; font-size:14px; }
#lightbox .insp--lb .compose-row { display:flex; gap:8px; }
#lightbox .insp--lb .compose-row .btn-dark { flex:1; }
#lightbox .insp--lb .compose .i { width:18px; height:18px; }
#lightbox .insp--lb .check { display:flex; align-items:center; gap:12px; min-height:44px; font-size:14px; cursor:pointer; }
#lightbox .insp--lb .check input { width:18px; height:18px; margin:0; accent-color:var(--accent); }
#lightbox .insp--lb .btn-block { width:100%; }
#lightbox .insp--lb .lb-coll-new { display:flex; gap:8px; }
#lightbox .insp--lb .lb-coll-new .inp { flex:1; min-width:0; height:44px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; font-size:14px; }
#lightbox .insp--lb .lb-err { margin-top:8px; color:var(--danger); }
#lightbox .insp--lb .btn .i { width:18px; height:18px; }

/* Angeheftet (nur Desktop): Inspector als eigene Spalte, das Bild rückt zur Seite.
   Nicht angeheftet liegt er über dem Bild; der Pfeil „Nächstes“ rückt dann vor ihn */
@media (min-width:761px) {
  body:not([data-pin="true"]) #lightbox:has(> .insp:not([hidden])) .lb-arrow.next { right:434px; }
  body[data-pin="true"] #lightbox:has(> .insp:not([hidden])) { grid-template-columns:minmax(0,1fr) 390px; }
  body[data-pin="true"] #lightbox > :not(.insp) { grid-column:1; }
  body[data-pin="true"] #lightbox > .insp:not([hidden]) { position:relative; inset:auto; grid-column:2; grid-row:1 / -1; z-index:1; width:auto; max-width:none; border:0; border-left:1px solid var(--border); border-radius:0; box-shadow:none; }
}
@media (max-width:760px) {
  #lightbox { grid-template-rows:56px minmax(0,1fr) auto; }
  #lightbox .lb-top { padding:0 8px 0 16px; gap:4px; }
  #lightbox .bb { min-width:44px; height:44px; }
  #lightbox .icon-btn { width:44px; height:44px; }
  #lightbox .lb-slide { padding:0; }
  #lightbox .lb-slide img:not(#lbScribbleOverlay) { border-radius:0; }
  #lightbox .lb-arrow.prev { left:8px; } #lightbox .lb-arrow.next { right:8px; }
  #lightbox .lb-foot { flex-wrap:wrap; padding:10px 12px max(14px, env(safe-area-inset-bottom)); }
  #lightbox .lb-flags { order:3; width:100%; margin:6px 0 0; justify-content:space-between; }
  #lightbox .lb-flags .flag { width:48px; height:48px; }
  #lightbox .insp--lb { inset:0; width:auto; max-width:none; border-radius:0; border:0; z-index:70; }
}

/* ----------------------------------------------------------------------
   Galerieseite, Etappe 6: Formular-Modals .lsm (Freigabe-Einstellungen #linkSettingsModal mit 6 Tabs,
   #exportModal, #printModal, Rückfragen #unsaved*Modal). Vorlage Prototyp #linkDialog (.dlg-wide, .frow).
   div statt <dialog>, weil settingsTabs.js/app.js über .hidden schalten; Zustände über aria-selected/-pressed.
   Schalter sind native Checkboxen: <label class="switch">Text<input class="sr-only"><span class="track"></span></label> */
/* Dialoge über dem mobilen Vollbild-Inspector (.insp z 70), aus dem sie geöffnet werden */
.lsm { position:fixed; inset:0; z-index:75; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; padding:16px; font-family:var(--font-ui); font-size:15px; color:var(--ink); }
.lsm.hidden { display:none; }
.lsm:not(.hidden) { display:grid; } /* schlägt .flex/.block, die app.js und modal.js beim Öffnen setzen */
.lsm-confirm { z-index:80; }
:where(.lsm) :where(button, input, select, textarea) { font:inherit; color:inherit; }
.lsm-scrim { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.lsm-dlg { position:relative; min-width:0; display:flex; flex-direction:column; width:min(820px, 100%); max-height:calc(100dvh - 32px); padding:20px; border-radius:16px; background:var(--surface); box-shadow:var(--shadow-pop); }
.lsm-dlg-md { width:min(640px, 100%); }
.lsm-confirm .lsm-dlg { width:min(440px, 100%); }
.lsm .dlg-head h2 { margin:0 0 4px; font-size:17px; }
.lsm .dlg-head p { margin:0; font-size:13px; line-height:1.5; color:var(--muted); }
.lsm .dlg-head .icon-btn { margin:-8px -8px 0 0; }
.lsm .i { display:inline-block; }
.lsm .muted { color:var(--muted); }
[data-unsaved-message] { white-space:pre-line; }
.lsm-warn { display:flex; align-items:center; gap:6px; margin-top:6px !important; color:var(--flag-pill-yellow-fg) !important; }
.lsm-warn .i { width:16px; height:16px; }

.lsm .tabs { flex:none; overflow-x:auto; margin:0 -20px; padding:0 20px; scrollbar-width:none; }
.lsm .tabs button { flex:none; padding:0 14px; white-space:nowrap; cursor:pointer; }
.lsm .lp-tab-dirty { display:inline-block; width:7px; height:7px; margin:0 0 2px 6px; border-radius:50%; background:var(--flag-yellow); vertical-align:middle; }
.lsm .dlg-body { flex:1 1 auto; min-height:0; max-height:min(60vh, 560px); overflow:auto; overscroll-behavior:contain; margin:0 -20px 14px; padding:4px 20px 0; }
.lsm .dlg-body h4 { margin:18px 0 0; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.lsm .dlg-body h4:first-child { margin-top:10px; }
.lsm .dlg-foot { flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; }
.lsm .dlg-foot .hint { margin:0; }
/* Freigabe-Formular oben verankert: beim Tab-Wechsel bewegt sich nur die Unterkante, der Kopf springt nicht */
#linkSettingsModal { align-items:start; padding-top:max(16px, 8vh); }

/* Zeilen: Beschriftung links, Steuerelement rechts */
.lsm .frow { display:grid; grid-template-columns:210px minmax(0,1fr); gap:8px 20px; align-items:center; padding:14px 0; border-top:1px solid var(--border); }
#presentationLinkModal .frow { border-top:0; }
.lsm .lp-tab-panel > .frow:first-child, .lsm h4 + .frow, .lsm h4 + .hint + .frow { border-top:0; }
.lsm .frow > .lbl { font-size:14px; font-weight:600; }
/* Unterpunkte von „Herunterladen“: gleiche Spalten wie die anderen Zeilen, Beschriftung eingerückt mit „└“, ohne Trennlinie darüber */
.lsm .frow[data-download-detail] { padding:6px 0; border-top:0; }
.lsm .frow[data-download-detail] > .lbl { padding-left:22px; position:relative; font-size:13px; font-weight:500; }
.lsm .frow[data-download-detail] > .lbl::before { content:""; position:absolute; left:6px; top:2px; width:10px; height:12px; border-left:2px solid var(--border); border-bottom:2px solid var(--border); border-bottom-left-radius:6px; }
.lsm .frow .lbl small { display:block; margin-top:3px; font-size:12px; font-weight:400; color:var(--muted); }
.lsm .hint { margin:6px 0 0; font-size:12px; line-height:1.5; color:var(--muted); }
.lsm .inp { height:44px; width:100%; max-width:420px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink); font-size:14px; }
.lsm textarea.inp { height:auto; padding:10px 12px; line-height:1.5; resize:vertical; }
.lsm .inp:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.lsm .inp:disabled { opacity:.5; }
.lsm .inp-num { max-width:120px; }
.lsm .inp-date { width:180px; }
.lsm-mono { max-width:none !important; font-family:ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size:13px !important; }
.lsm .inp-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.lsm .inp-row + .inp-row, .lsm .check + .inp-row { margin-top:8px; }
.lsm .btn { cursor:pointer; }
.lsm .btn:disabled { opacity:.45; cursor:not-allowed; }
.lsm .lsm-ibtn { width:44px; padding:0; flex:none; }
.lsm .inp-prefix { display:flex; flex:1 1 260px; min-width:0; max-width:420px; height:44px; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface); }
.lsm .inp-prefix:focus-within { outline:2px solid var(--accent); outline-offset:1px; }
.lsm .inp-prefix span { flex:0 1 auto; max-width:55%; padding:0 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:42px; font-size:13px; color:var(--muted); background:var(--surface-alt); border-right:1px solid var(--border); }
.lsm .inp-prefix .inp { flex:1; min-width:0; height:42px; max-width:none; border:0; border-radius:0; outline:0; }

/* Schalter und Auswahl */
.lsm .switch { max-width:420px; min-height:44px; font-size:14px; text-align:left; cursor:pointer; }
.lsm .inp-row .switch { flex:1 1 240px; }
.lsm .switch:has(input:checked) .track { background:var(--accent); }
.lsm .switch:has(input:checked) .track::after { left:18px; }
.lsm .switch:has(input:focus-visible) .track { outline:2px solid var(--accent); outline-offset:2px; }
.lsm .switch:has(input:disabled) { opacity:.5; cursor:not-allowed; }
.lsm .check { display:flex; align-items:center; gap:12px; min-height:44px; font-size:14px; cursor:pointer; }
.lsm .check input { flex:none; width:18px; height:18px; margin:0; accent-color:var(--accent); }
.lsm .check:has(input:disabled) { opacity:.5; cursor:not-allowed; }
.lsm .opts { display:flex; flex-wrap:wrap; gap:0 18px; }
.lsm-danger { color:var(--danger); }
.lsm-err { margin:6px 0 0; font-size:12px; color:var(--danger); }
.lsm-link { margin-top:6px; padding:0; border:0; background:none; font-size:12px; color:var(--muted); text-decoration:underline; cursor:pointer; }

/* Segment-Knöpfe (Layout, Masonry-Modus): Trennlinien über 1px-gap auf Randfarbe */
.lsm-seg { display:grid; grid-auto-flow:column; gap:1px; width:max-content; max-width:100%; border:1px solid var(--border); border-radius:var(--radius-ctl); background:var(--border); overflow:hidden; }
.lsm-seg button { height:42px; padding:0 16px; border:0; background:var(--surface); color:var(--muted); font-size:14px; white-space:nowrap; cursor:pointer; }
.lsm-seg button:hover { background:var(--surface-alt); }
.lsm-seg button[aria-pressed="true"] { background:var(--primary); color:var(--on-primary); }
.lsm-seg-wrap { grid-auto-flow:row; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); width:100%; max-width:420px; }
/* Raster-Segmente dürfen umbrechen („Geordnet + Ausgleich“ passt mobil nicht in 150 px) */
.lsm-seg-wrap button { height:auto; min-height:42px; padding:6px 12px; white-space:normal; line-height:1.25; }
.lsm-range { display:grid; gap:6px; max-width:420px; margin-top:12px; font-size:14px; }
.lsm-range input { accent-color:var(--accent); }
.lsm-range small { font-size:12px; color:var(--muted); }
.lsm-nums { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:10px; max-width:420px; margin-top:10px; }
.lsm-nums label { display:grid; gap:4px; font-size:12px; color:var(--muted); }
.lsm .lbl-row { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; max-width:420px; }
.lsm .switch + div > .lbl-row:first-child, .lsm .lbl-row + .lbl-row { margin-top:8px; }
/* Titel-Vorschau (Tab Präsentation): klebt oben, solange man durch die Titel-Optionen scrollt.
   Mini-Headerbild wie der Hero in gallery.php (.hero-pos[data-pos]) plus Leiste */
.lsm-title-pin { position:sticky; top:-4px; z-index:2; margin:0 -20px; padding:10px 20px 12px; background:var(--surface); border-bottom:1px solid var(--border); }
.lsm-hero { position:relative; height:150px; padding:12px 16px; border-radius:10px; overflow:hidden; }
.lsm-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.25) 55%, rgba(0,0,0,.55)); }
.lsm-hero .lp-hero-title { position:relative; max-width:100%; margin:0; padding:0; line-height:1.15; letter-spacing:.6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 8px rgba(0,0,0,.35); }
.lsm-hero .lp-hero-title.is-dark { text-shadow:none; }
.lsm-hero .lp-hero-title.is-sm { font-size:16px; } .lsm-hero .lp-hero-title.is-md { font-size:22px; } .lsm-hero .lp-hero-title.is-lg { font-size:30px; }
.lsm-hero .lp-hero-title[hidden], .lsm-bar b[hidden] { display:none; }
.lsm-hero-tag { position:absolute; top:6px; right:6px; padding:2px 7px; border-radius:6px; background:rgba(0,0,0,.45); color:#fff; font-size:11px; }
.lsm-bar { display:flex; align-items:center; gap:10px; height:36px; margin-top:6px; padding:0 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-alt); }
.lsm-bar b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:650; letter-spacing:.3px; text-transform:uppercase; }
.lsm-bar .lsm-hero-tag { position:static; margin-left:auto; background:var(--border); color:var(--muted); }

/* Export / Import */
.lsm-intro { margin:6px 0 14px; font-size:14px; line-height:1.5; color:var(--muted); }
.lsm-gap { margin-top:8px; }
.lsm label.btn { position:relative; }
.lsm-note { padding:4px 10px; border-radius:8px; font-size:12px; background:var(--surface-alt); color:var(--ink); }
.lsm-note[data-tone="success"] { background:var(--flag-pill-green-bg); color:var(--flag-pill-green-fg); }
.lsm-note[data-tone="warn"] { background:var(--flag-pill-yellow-bg); color:var(--flag-pill-yellow-fg); }
.lsm-note[data-tone="error"] { background:var(--flag-pill-red-bg); color:var(--flag-pill-red-fg); }
.lsm-acc { margin-top:16px; padding:0 14px; border:1px solid var(--border); border-radius:12px; }
.lsm-acc summary { display:flex; align-items:center; justify-content:space-between; min-height:44px; font-size:14px; font-weight:600; list-style:none; cursor:pointer; }
.lsm-acc summary::-webkit-details-marker { display:none; }
.lsm-acc summary .muted { font-size:12px; font-weight:400; }
.lsm-acc textarea { max-width:none; margin-bottom:10px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
.lsm-acc .inp-row { margin-bottom:14px; }
.lsm-count { display:inline-grid; place-items:center; min-width:32px; height:32px; margin-right:6px; padding:0 10px; border-radius:99px; background:var(--surface-alt); font-weight:700; }

@media (max-width:760px) {
  .lsm:not(.lsm-confirm) { padding:0; place-items:stretch; }
  #linkSettingsModal { padding-top:0; align-items:stretch; }
  .lsm:not(.lsm-confirm) .lsm-dlg { width:100%; max-height:none; height:100dvh; padding:16px 16px max(16px, env(safe-area-inset-bottom)); border-radius:0; }
  /* kurze Dialoge als Blatt von unten statt Vollbild */
  .lsm:not(.lsm-confirm):has(> .lsm-dlg-sm) { align-items:end; }
  .lsm:not(.lsm-confirm) .lsm-dlg-sm { height:auto; max-height:92dvh; border-radius:16px 16px 0 0; }
  .lsm .tabs { margin:0 -16px; padding:0 16px; }
  .lsm .dlg-body { max-height:none; margin:0 -16px 12px; padding:4px 16px 0; }
  .lsm-title-pin { margin:0 -16px; padding:10px 16px 12px; }
  .lsm .frow { grid-template-columns:minmax(0,1fr); }
  .lsm .dlg-foot :is(.hint, .spacer) { display:none; }
  .lsm .inp-prefix { flex-basis:100%; max-width:none; }
  .lsm .inp-date { width:100%; max-width:none; }
  .lsm .dlg-foot .btn { flex:1; }
}
/* Übrige Dialoge der Galerieseite im selben Gerüst (Feedback 25.09.): #appModal (Modal.alert/confirm),
   #clientLinkModal, #presentationLinkModal, #collectionSettingsModal, #heroFocusModal */
#appModal, #zipOverlay { z-index:9999; }
.lsm-busy { display:flex; align-items:flex-start; gap:14px; }
.lsm-busy h2 { margin:2px 0 4px; font-size:17px; }
.lsm-busy p { margin:0; font-size:13px; line-height:1.5; color:var(--muted); }
.lsm-spin { flex:none; width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:lsm-spin .8s linear infinite; }
@keyframes lsm-spin { to { transform:rotate(360deg); } }
.lsm-dlg-sm { width:min(480px, 100%); }
.lsm-msg { margin-top:4px; font-size:14px; line-height:1.5; color:var(--muted); }
.lsm-msg :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { display:block; width:100%; height:44px; margin-top:10px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink); font-size:14px; }
.lsm .dlg-foot.lsm-foot-gap, #appModalActions { margin-top:18px; }
.lsm .lsm-grow { flex:1 1 200px; max-width:none; min-width:0; }
.lsm .lsm-full { max-width:none; }
.lsm-field { display:block; margin-bottom:6px; font-size:14px; font-weight:600; }
.lsm-gap { margin-top:12px; }
.lsm .btn-danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.lsm .btn-danger:hover { background:color-mix(in srgb, #000 12%, var(--danger)); }
.lsm .lsm-danger-btn { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, var(--border)); }
.lsm-focus { position:relative; width:fit-content; max-width:100%; margin:0 auto; overflow:hidden; border-radius:10px; cursor:crosshair; }
.lsm-focus img { display:block; max-width:100%; max-height:min(55vh, 460px); width:auto; height:auto; } /* Rahmen = Bild, damit der Punkt in % stimmt */
.lsm-focus-dot { position:absolute; width:18px; height:18px; border:2px solid #fff; border-radius:50%; background:var(--accent); box-shadow:0 1px 4px rgba(0,0,0,.4); transform:translate(-50%, -50%); pointer-events:none; }

/* Nachbesserung Etappe 6 (Feedback 25.09.): Kundenansicht + Zahnrad (Freigabe-Einstellungen) in der .gbar,
   „Layout bearbeiten" im Tab Freigabe hinter dem Modus */
.gbar .ghead-actions .gbar-gear { width:44px; padding:0; }
.insp--gallery .kv .link-btn { min-height:0; padding:0 0 0 6px; font-weight:400; }
/* Kundenkopf mobil (Prototyp „Kundenkopf“): der Galeriename steht groß im Hero bzw. in .ghead, im Kopf nur Logo + Untergalerien */
@media (max-width:760px) { .gtop .crumb:not(.crumb-adm) > b { display:none; } }
/* Sprachumschalter im Kundenkopf (Schritt 5c): aktuelle Sprache mit Haken, sonst ohne */
.lang-menu .pop button:not([aria-current]) .i { visibility:hidden; }
.lang-menu .pop { min-width:12rem; }
.lang-menu .grow { flex:1; }
.lang-menu .lang-hint { font-size:12px; color:var(--muted); }

/* Kachel: Status-/Auswahl-Reiter erst mit dem Bild (app.js setzt .image-frame.is-ready bei load/error) */
#galleryGrid .image-frame:not(.is-ready) :is(.overlay-root, .mobile-toolbar) { visibility:hidden; }
#galleryGrid .image-frame img { transition:opacity .25s; }
#galleryGrid .image-frame:not(.is-ready) img { opacity:0; }

/* Einstellungen (Schritt 6a, Prototyp Seite 6): settings.php und user_import.php. Eine Seite, Unternavigation links klebt,
   Bereiche als Karten. Schalter/Radios sind native Eingaben (.sr-only) wie in .lsm */
.set-grid { display:grid; grid-template-columns:190px minmax(0,1fr); gap:28px; align-items:start; }
.set-nav { position:sticky; top:0; display:grid; gap:2px; }
.set-nav a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--muted); text-decoration:none; font-size:14px; }
.set-nav a:hover, .set-nav a[aria-current] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-card); }
.set-nav .i { width:17px; height:17px; }
.set-sec { display:block; padding:24px 24px 10px; margin-bottom:20px; scroll-margin-top:12px; }
.set-solo { max-width:760px; }
.set-sec > h2 { margin:0 0 4px; font-size:18px; }
.set-sec > p.muted { margin:0 0 14px; font-size:14px; }
.set-sec h3 { margin:22px 0 0; font-size:15px; }
.setp .frow { display:grid; grid-template-columns:210px minmax(0,1fr); gap:8px 20px; align-items:center; padding:14px 0; border-top:1px solid var(--border); }
.setp h3 + .frow { border-top:0; }
.setp .frow > .lbl { font-size:14px; font-weight:600; }
.setp .frow .lbl small, .setp .hint { display:block; font-weight:400; color:var(--muted); font-size:12px; margin-top:3px; }
.setp .inp { height:44px; width:100%; max-width:420px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; font-size:14px; }
.setp textarea.inp { height:auto; min-height:88px; padding:10px 12px; resize:vertical; }
.transfer-page { width:auto; margin:0 32px; }
.transfer-page .phead > div { min-width:0; max-width:760px; }
.transfer-page .phead p { max-width:70ch; line-height:1.5; }
.transfer-instance-picker { display:flex; align-items:center; justify-content:flex-start; gap:24px; margin:18px 0; }
.transfer-instance-picker h2 { margin:0; font-size:18px; line-height:1.3; }
.transfer-instance-options { display:flex; gap:4px; padding:4px; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
.transfer-instance-choice { min-width:160px; justify-content:center; }
.transfer-instance-choice[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:var(--surface); }
.transfer-sections { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; gap:20px; width:100%; }
.transfer-source-view { grid-template-columns:repeat(3, minmax(0,1fr)); }
.transfer-sections[hidden] { display:none; }
.transfer-sections > .transfer-card { min-width:0; margin:0; padding:24px 24px 12px; }
.transfer-sections .frow { grid-template-columns:minmax(0,1fr); align-items:start; gap:8px; padding:12px 0; }
.transfer-sections .inp { max-width:none; }
.transfer-card > h3 { min-height:2.5em; padding-bottom:12px; border-bottom:1px solid var(--border); }
.transfer-card > p.muted { line-height:1.5; }
.transfer-method + .transfer-method { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.transfer-method h4 { margin:0 0 8px; font-size:15px; line-height:1.4; }
.transfer-method > .muted { margin:0 0 10px; line-height:1.5; }
.transfer-package-refresh { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:10px; }
.transfer-inbox-overview { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.transfer-inbox-overview h4 { margin:0 0 8px; font-size:15px; line-height:1.4; }
.transfer-inbox-list { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.transfer-inbox-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 10px; border:1px solid var(--border); border-radius:6px; background:var(--surface); }
.transfer-inbox-item.is-selected { border-color:var(--ink); box-shadow:inset 3px 0 0 var(--ink); }
.transfer-inbox-item strong, .transfer-inbox-source { display:block; overflow-wrap:anywhere; }
.transfer-inbox-source { margin-top:2px; color:var(--muted); font-size:12px; line-height:1.35; }
.transfer-inbox-state { flex:none; color:var(--muted); font-size:12px; text-align:right; }
.transfer-refresh-spinner { display:inline-block; width:14px; height:14px; margin-right:7px; vertical-align:-2px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:transfer-refresh-spin .7s linear infinite; }
@keyframes transfer-refresh-spin { to { transform:rotate(360deg); } }
#transfer-message.is-loading::before, #transfer-pull-progress.is-loading::before { display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-2px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; content:""; animation:transfer-refresh-spin .7s linear infinite; }
.transfer-sftp-path { display:block; margin-top:6px; padding:8px 10px; border:1px solid var(--border); border-radius:6px; overflow-wrap:anywhere; }
.transfer-preflight-note { margin:12px 0 4px; line-height:1.5; }
.field-help { margin:6px 0 12px; font-size:12px; line-height:1.4; }
.transfer-card [hidden] { display:none !important; }
.transfer-card textarea.inp { min-height:108px; overflow-wrap:anywhere; }
.transfer-card input[readonly] { overflow:hidden; text-overflow:ellipsis; }
.transfer-card .set-foot { justify-content:flex-start; }
.transfer-card .set-foot .btn-dark { min-width:min(100%, 220px); }
.transfer-card form + .muted { margin-top:10px; line-height:1.5; }
.transfer-card .check { align-items:flex-start; padding:8px 0; line-height:1.45; }
.transfer-card .check input { flex:none; margin-top:3px; }
.transfer-card #transfer-acceptance { padding-top:4px; }
.transfer-card #transfer-reset { display:grid; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.transfer-source-delete { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.transfer-source-delete h4 { margin:0 0 8px; font-size:15px; line-height:1.4; }
.transfer-source-delete > .muted { margin:0 0 10px; line-height:1.5; }
.maintenance-notice { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:12px 32px 20px; padding:16px 20px; border:1px solid color-mix(in srgb, var(--danger) 35%, var(--border)); border-left:4px solid var(--danger); border-radius:8px; background:color-mix(in srgb, var(--danger) 8%, var(--surface)); color:var(--ink); }
.maintenance-notice > div { display:grid; gap:6px; }
.maintenance-notice strong { line-height:1.35; }
.maintenance-notice span { color:var(--muted); font-size:14px; line-height:1.5; }
.maintenance-notice .btn { flex:none; }
.set-nav > a[href$="/data_transfer.php"] { margin-top:8px; padding-top:14px; border-top:1px solid var(--border); border-radius:0; }
.setp .inp:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.setp .inp-full { max-width:none; }
.setp .inp-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.setp .btn { cursor:pointer; }
.setp .btn-sm { height:44px; } /* gleiche Höhe wie .inp in einer Reihe */
.setp .asset { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:13px; }
.setp .asset .thumb { width:52px; height:52px; flex:none; border-radius:12px; border:1px solid var(--border); display:grid; place-items:center; background:var(--surface-alt); overflow:hidden; }
.setp .asset .thumb img { max-width:80%; max-height:80%; object-fit:contain; }
.setp .danger-btn { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, var(--border)); }
.setp .check { display:flex; align-items:center; gap:12px; min-height:44px; font-size:14px; cursor:pointer; }
.setp .check input { width:18px; height:18px; margin:0; accent-color:var(--accent); }
.setp .swatches { display:flex; flex-wrap:wrap; gap:8px; }
.setp .swatches label { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px; border:1px solid var(--border); border-radius:999px; background:var(--surface); font-size:13px; cursor:pointer; }
.setp .swatches label:has(input:checked) { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.setp .swatches label:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.setp .swatches .dot-p { width:14px; height:14px; border-radius:50%; border:1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.setp .switch { max-width:420px; min-height:44px; font-size:14px; cursor:pointer; }
.setp .switch:has(input:checked) .track { background:var(--accent); }
.setp .switch:has(input:checked) .track::after { left:18px; }
.setp .switch:has(input:focus-visible) .track { outline:2px solid var(--accent); outline-offset:2px; }
.set-foot { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:10px; padding:14px 0; border-top:1px solid var(--border); }
.set-foot .hint { margin:0 auto 0 0; }
.set-flash { margin:0 0 14px; padding:10px 14px; border-radius:10px; font-size:14px; background:color-mix(in srgb, #16a34a 12%, var(--surface)); color:color-mix(in srgb, #15803d 80%, var(--ink)); }
.set-flash.is-error { background:color-mix(in srgb, var(--danger) 12%, var(--surface)); color:var(--danger); }
.tbl { width:100%; border-collapse:collapse; font-size:14px; }
.tbl th { text-align:left; font-size:12px; font-weight:600; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--border); }
.tbl td { padding:10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl td:last-child, .tbl th:last-child { text-align:right; }
.tbl-act { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px; }
.tbl td .muted { font-size:13px; }
/* Tabelle als Karte unter 1024 px (Handy, Tablet, Seitenleiste daneben): erste Zelle = Titel,
   Werte zweispaltig mit Beschriftung aus data-label (= Spaltenkopf), letzte Zelle (Aktionen) über die ganze Breite. */
@media (max-width:1023px) {
  .tbl-stack thead { display:none; }
  .tbl-stack, .tbl-stack tbody { display:block; }
  .tbl-stack tr { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 16px; padding:14px 0; border-bottom:1px solid var(--border); }
  .tbl-stack tr:last-child { border-bottom:0; }
  .tbl-stack td { display:block; min-width:0; padding:0; border:0; text-align:left; overflow-wrap:anywhere; }
  .tbl-stack td:first-child, .tbl-stack td:last-child { grid-column:1 / -1; }
  .tbl-stack td:first-child { font-weight:600; }
  .tbl-stack td:last-child { text-align:left; }
  .tbl-stack td[data-label]::before { content:attr(data-label); display:block; margin-bottom:2px; font-size:12px; font-weight:600; color:var(--muted); }
  .tbl-stack .tbl-act { position:relative; justify-content:flex-start; }
  /* Aufklapp-Formulare (Passwort, Übergeben) hängen an der Aktionsreihe statt am Knopf, damit sie im Bild bleiben */
  .tbl-stack .set-pw { position:static; }
  .tbl-stack .set-pw form { left:0; right:auto; width:min(340px, 100%); }
}
.set-inline { display:inline; }
.set-pw summary { list-style:none; }
.set-pw summary::-webkit-details-marker { display:none; }
.set-pw[open] summary { background:var(--surface-alt); }
/* Formular klappt als Popover unter dem Knopf auf, die Knopfzeile bleibt stehen */
.set-pw { position:relative; }
.set-pw form { position:absolute; z-index:30; top:calc(100% + 6px); right:0; width:340px; display:grid; gap:10px; padding:14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-pop); text-align:left; }
.set-pw .inp { width:100%; }
.set-pw form p { margin:0; font-size:13px; line-height:1.45; color:var(--muted); }
.set-pw form .btn { justify-self:end; }
.set-warn { display:block; margin-top:4px; font-size:12px; color:var(--danger); }
/* Unter 1024 px steht die Unternavigation einzeilig über dem Inhalt, Zeilen einspaltig */
@media (max-width:1023px) {
  .set-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .setp .frow { grid-template-columns:minmax(0,1fr); }
  .set-nav { position:static; display:flex; align-items:center; overflow-x:auto; scrollbar-width:none; }
  .set-nav::-webkit-scrollbar { display:none; }
  .transfer-sections { grid-template-columns:minmax(0,1fr); gap:16px; }
  .transfer-sections > .transfer-card { padding:22px 20px 12px; }
  .set-nav > a[href$="/data_transfer.php"] { margin:0 0 0 8px; padding:10px 12px; border-top:0; border-left:1px solid var(--border); }
}
@media (max-width:760px) {
  .transfer-page { margin:0 16px; }
  .transfer-instance-picker { align-items:flex-start; flex-direction:column; gap:10px; margin:18px 0; }
  .transfer-instance-options { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
  .transfer-instance-choice { min-width:0; }
}
@media (max-width:1279px) {
  .transfer-sections { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px) {
  .set-pw form { width:min(340px, calc(100vw - 32px)); }
  .maintenance-notice { align-items:stretch; flex-direction:column; gap:12px; margin:10px 16px 16px; padding:14px; }
  .maintenance-notice .btn { justify-content:center; min-height:44px; }
}
.set-note { margin:4px 0 14px; padding:12px 14px; border-radius:10px; background:var(--surface-alt); font-size:14px; color:var(--muted); }
.set-note b { color:var(--ink); }
/* Mein Konto (Schritt 6b): Dialog mit .setp-Zeilen, schmal also Beschriftung über dem Feld */
#accountDialog .frow { grid-template-columns:minmax(0,1fr); }
#accountDialog .frow:first-of-type { border-top:0; }
.acc-msg { margin:4px 0 0; font-size:13px; color:var(--danger); }
.acc-msg.is-ok { color:color-mix(in srgb, #15803d 80%, var(--ink)); }
/* Speicher (Schritt 6c): Seitenleiste .storage + Einstellungen › Speicher. Voll = Balken in Warnfarbe */
.meter { height:8px; max-width:420px; border-radius:99px; background:var(--surface-alt); overflow:hidden; }
.meter i { display:block; height:100%; background:var(--accent); border-radius:inherit; }
[data-storage][data-full] :is(.bar, .meter) i { background:var(--danger); }
.set-storage-text { margin:8px 0 0; font-size:13px; font-weight:600; }
.setp .set-limit { max-width:140px; }
/* Wasserzeichen (Schritt 6d): Vorschau auf Schachbrett, damit Transparenz sichtbar ist */
.setp .thumb-check { background:repeating-conic-gradient(var(--surface-alt) 0 25%, var(--surface) 0 50%) 0 0 / 12px 12px; }
.setp .inp-pct { width:84px; }
.setp label.inp-row { gap:8px; font-size:14px; }
/* Shell nie höher als das Fenster: sonst scrollt ein Anker-Sprung (#set-… nach dem Speichern) das ganze Dokument
   und Kopfzeile/Seitenleiste wandern nach oben. clip statt hidden, weil hidden per Skript/Anker weiter scrollbar ist.
   In einer hohen Seitenleiste scrollt nur .nav; die Leiste selbst nicht, sonst schnitte sie das Nutzermenü (.pop.up-left) ab. */
.shell { overflow:clip; }
.shell > .side { min-height:0; }
/* Speicher pro Benutzer (Nachbesserung 6c) */
.set-storage-tbl td:nth-child(2) { min-width:180px; }
.set-storage-tbl .meter { margin-top:6px; max-width:240px; }
.set-storage-tbl tr.is-total td { font-weight:600; border-bottom:0; }
.set-storage-tbl .set-limit { width:90px; }
@media (max-width:1023px) {
  .set-storage-tbl td:nth-child(2) { min-width:0; grid-column:1 / -1; }
  .set-storage-tbl td:nth-child(3):not([data-label]) { display:none; }
}
.set-sec > p.muted [data-storage-measured] { white-space:nowrap; }
/* Wasserzeichen-Karte mit Live-Vorschau (Nachbesserung 6d). Vorschau rechnet wie image_apply_watermark():
   Breite = Größe % der Bildbreite, Rand 3 % der Bildbreite (cqw), Deckkraft */
.wm-figure { margin:0; max-width:420px; }
/* Wasserzeichen-Liste: je Zeichen eine einklappbare Zeile */
.wm-det { border:1px solid var(--border); border-radius:var(--radius-ctl); margin-top:10px; background:var(--surface); }
.wm-det > summary { display:flex; align-items:center; gap:12px; min-height:56px; padding:6px 14px; cursor:pointer; list-style:none; }
.wm-det > summary::-webkit-details-marker { display:none; }
.wm-det-name { display:flex; flex-direction:column; min-width:0; margin-right:auto; }
.wm-det-name small { color:var(--muted); font-size:12px; }
.wm-det-chev { transition:transform .15s; flex:none; }
.wm-det[open] .wm-det-chev { transform:rotate(90deg); }
.wm-det > .wm-item { padding:0 14px 12px; }
.wm-det > .wm-item > .frow:first-child { border-top:0; }
.wm-figure figcaption { margin-top:6px; font-size:12px; color:var(--muted); }
.wm-preview { position:relative; aspect-ratio:3 / 2; border-radius:12px; overflow:hidden; container-type:inline-size;
  background:var(--mtn) center bottom / 100% 72% no-repeat, linear-gradient(180deg,#a9bccd,#e9cfae 55%,#b9793f); }
.wm-preview .wm-photo { display:block; width:100%; height:100%; object-fit:cover; }
.wm-preview .wm-mark { position:absolute; width:var(--wm-size); height:auto; opacity:var(--wm-opacity); }
.wm-preview[data-pos="tl"] .wm-mark { left:3cqw; top:3cqw; }
.wm-preview[data-pos="tr"] .wm-mark { right:3cqw; top:3cqw; }
.wm-preview[data-pos="bl"] .wm-mark { left:3cqw; bottom:3cqw; }
.wm-preview[data-pos="br"] .wm-mark { right:3cqw; bottom:3cqw; }
.wm-preview[data-pos="c"] .wm-mark { left:50%; top:50%; transform:translate(-50%, -50%); }
.wm-range { flex:1 1 180px; max-width:320px; accent-color:var(--accent); }
.wm-out { min-width:48px; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.wm-det .thumb { width:52px; height:52px; flex:none; border-radius:12px; border:1px solid var(--border); display:grid; place-items:center; background:var(--surface-alt); overflow:hidden; }
.wm-det .thumb img { max-width:80%; max-height:80%; object-fit:contain; }
@media (max-width:1023px) {
  /* Zeile zweizeilig: Vorschau + Name + Pfeil oben, Pillen darunter eingerückt */
  .wm-det > summary { flex-wrap:wrap; gap:6px 12px; padding:10px 14px; }
  .wm-det-name { flex:1 1 calc(100% - 110px); }
  .wm-det > summary .badge { order:3; white-space:nowrap; }
  .wm-det-chev { order:2; }
}
.wm-det .thumb-check { background:repeating-conic-gradient(var(--surface-alt) 0 25%, var(--surface) 0 50%) 0 0 / 12px 12px; }

/* Etappe 1 (Sammelpunkte nach Schritt 6) */
/* Scrollleiste bleibt beim Sperren des Scrollens (Modal offen) stehen, sonst springt der Hintergrund */
html:has(.gwrap) { scrollbar-gutter:stable; }
/* Wallchemy-Hinweis in den Galeriedetails: eigene Überschrift, Text bricht nicht am Symbol */
.insp--gallery .wc-note { margin-top:14px; }
.insp--gallery .wc-note b { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
.insp--gallery .wc-note .i { width:15px; height:15px; flex:none; }
.insp--gallery .wc-note .hint { margin:2px 0 0; }
/* Abhängiger Schalter (Anbindung ohne Wallchemy-Produkt) */
.setp .frow.is-off { opacity:.55; }
/* Icon-Schiene (78px): lange Beschriftung („Einstellungen“) bleibt in der Box, notfalls mit Silbentrennung */
.rail { overflow-x:hidden; }
.rail a { margin:0 3px; font-size:10.5px; min-width:0; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:anywhere; }

/* Etappe 2 (Galerie-Ansicht und Marke) */
/* Galerie-Details: Ersteller als eigene Zeile */
.insp--gallery .insp-by { display:flex; align-items:center; gap:10px; margin:14px 0 0; font-size:13px; color:var(--muted); }
.insp--gallery .insp-by .avatar { width:28px; height:28px; font-size:11px; color:var(--ink); }
.insp--gallery .insp-by b { font-weight:600; color:var(--ink); }
/* Galerieliste und Kacheln: Art (Kunde/Privat) und Favorit als Symbole am Titel */
.gtitle { display:flex; align-items:center; gap:6px; min-width:0; }
.gtitle h2 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gtitle .gsym { flex:none; width:28px; height:28px; display:grid; place-items:center; padding:0; border:0; border-radius:8px; background:none; color:var(--muted); }
.gtitle .gsym .i { width:16px; height:16px; }
.gtitle .gkind { margin-left:-6px; }
.gtitle .gfav { cursor:pointer; }
.gtitle .gfav:hover { background:var(--surface-alt); color:var(--ink); }
.gtitle .gfav[aria-pressed="true"] { color:var(--accent); }
.gtitle .gfav[aria-pressed="true"] .i { fill:currentColor; }
/* Liste: Titel und Status in der ersten Zeile, Metadaten und Tags je in einer eigenen Zeile */
body[data-view="list"] .gbody > :is(.gmeta, .gtags, .parent-hint, p) { grid-column:1/-1; }
@media (min-width:761px) { body[data-view="list"] .gbody .badges { justify-content:flex-end; } }
body[data-view="list"] .gcover-btns { justify-content:flex-start; }
/* Etappe 2 nachgebessert: Herz auf dem Cover in den Kacheln, am Titel nur in der Liste; Produktname neben dem Logo */
.heart { width:36px; height:36px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.18); color:#fff; cursor:pointer; }
.heart:hover { background:rgba(0,0,0,.32); }
.heart[aria-pressed="true"] .i { fill:#fff; }
body[data-view="list"] .heart, body:not([data-view="list"]) .gtitle .gfav { display:none; }
.brand > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Liste: Vorschaubild füllt die volle Höhe der Zeile und schließt bündig mit der Karte ab */
body[data-view="list"] .gcard { align-items:stretch; }
body[data-view="list"] .gcover { aspect-ratio:auto; min-height:100px; }
body[data-view="list"] .gbody { align-content:center; }
body[data-view="list"] .gcard:has(> .subs-btn) .gcover { border-bottom-left-radius:0; }

/* Einstellungsseite (Etappe 4): ab Desktop scrollt nur die Kartenspalte, Titel und Unternavigation stehen fest */
@media (min-width:761px) {
  .main:has(> .set-grid) { display:flex; flex-direction:column; overflow:hidden; padding-bottom:0; }
  .main > .set-grid { flex:1; min-height:0; align-items:stretch; }
  .set-grid > .set-nav { align-self:start; }
  /* Rand links/oben, damit der Kartenschatten nicht abgeschnitten wird; rechts sitzt die Scrollleiste am Fensterrand */
  .set-body { min-height:0; overflow:auto; overscroll-behavior:contain; margin:-8px -32px 0 -8px; padding:8px 32px 40px 8px; }
}
.set-body, .main:has(> .set-grid) { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { .set-body, .main:has(> .set-grid) { scroll-behavior:auto; } }

/* Galerieseite folgt dem Preset (Etappe 5). Tailwind v4 liest Grau, Weiß und Indigo aus Variablen; statt jede Klasse in
   gallery.php und den Skripten umzuschreiben, zeigen die Variablen hier auf die Preset-Tokens. Bei dunklen Presets kehrt
   sich die Grauskala damit von selbst um. Weiße Schrift bleibt weiß (steht auf Bildern, Akzent- und Dunkelflächen). */
body[data-gallery-id] {
  --color-white:var(--surface);
  --color-gray-50:var(--bg);
  --color-gray-100:color-mix(in srgb, var(--ink) 6%, var(--bg));
  --color-gray-200:color-mix(in srgb, var(--ink) 12%, var(--bg));
  --color-gray-300:color-mix(in srgb, var(--ink) 22%, var(--bg));
  --color-gray-400:color-mix(in srgb, var(--ink) 42%, var(--bg));
  --color-gray-500:color-mix(in srgb, var(--ink) 62%, var(--bg));
  --color-gray-600:color-mix(in srgb, var(--ink) 72%, var(--bg));
  --color-gray-700:color-mix(in srgb, var(--ink) 82%, var(--bg));
  --color-gray-800:color-mix(in srgb, var(--ink) 90%, var(--bg));
  --color-gray-900:var(--ink);
  --color-indigo-50:var(--accent-soft);
  --color-indigo-100:color-mix(in srgb, var(--accent) 20%, var(--surface));
  --color-indigo-200:color-mix(in srgb, var(--accent) 35%, var(--surface));
  --color-indigo-500:var(--accent);
  --color-indigo-600:var(--accent);
  --color-indigo-700:color-mix(in srgb, var(--accent) 80%, var(--ink));
  --color-indigo-900:color-mix(in srgb, var(--accent) 55%, var(--ink));
}
/* Galerie-Hintergrund feiner als der Seitenhintergrund (halb zur Kartenfläche), damit die Bilder mehr Raum haben */
body[data-gallery-id] { --gallery-bg:color-mix(in srgb, var(--bg) 50%, var(--surface)); }
:root[data-mode="dark"] body[data-gallery-id] { --gallery-bg:var(--bg); }
body[data-gallery-id], body[data-gallery-id] #mainContent, body[data-gallery-id] .gbar { background-color:var(--gallery-bg); }
body[data-gallery-id] .text-white { color:#fff; }
body[data-gallery-id] .bg-indigo-600.text-white { color:var(--on-accent); }
/* absichtlich dunkle Flächen mit heller Schrift: Hinweis-Blase beim Hochladen, Debug-Box */
body[data-gallery-id] :is(.bg-gray-900\/90, textarea.bg-gray-900) { --color-gray-900:#101828; }
body[data-gallery-id] .image-frame { border-color:var(--border); }

/* Speicher: Bild-Cache aufräumen (Etappe 6) */
.set-cleanup { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:4px 0 14px; }
.set-cleanup [data-cleanup-result] { font-size:14px; }

/* Etappe 9: Sichtbarkeit im Team. Häkchen im Kartenmenü, Nur-lesen-Ansicht der Galerie (Server sperrt ohnehin mit 403) */
.pop [data-team][aria-pressed="false"] .i { visibility:hidden; }
.team-read-pill { padding-right:18px; }
.team-read-pill .i { width:16px; height:16px; }
[data-team-read] #openHeroFocusBtn, [data-team-read] [data-desc-edit], [data-team-read] [data-hero-edit],
[data-team-read] [data-insp-tags] + .addrow, [data-team-read] [data-open-tab], [data-team-read] #createCollectionBtn,
[data-team-read] .collection-edit-btn, [data-team-read] .dupl-collection-btn, [data-team-read] .edit-collection-settings-btn,
[data-team-read] .delete-collection-btn { display:none !important; }
[data-team-read] [data-insp-tag] { pointer-events:none; }
.flag-btn.flag-readonly { pointer-events:none; }
#galleryGrid .group:is([data-status="none"], :not([data-status])) .flag-readonly { display:none; }
.frow .set-select { justify-self:start; width:260px; max-width:100%; }
[data-create-team] { margin-top:20px; }

/* Alle Dropdowns: eigenes Chevron mit festem Abstand zum Rand statt des nativen (klebt je nach Browser am Rand).
   !important, weil Formularregeln (z. B. .lsm-msg, Tailwind px-*) das Padding sonst wieder überschreiben */
select:not([multiple]):not([size]) { appearance:none; -webkit-appearance:none; padding-right:40px !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 14px center !important; background-size:12px !important; }
.insp--gallery .field-select { padding-right:14px; }

/* Demogalerie-Badge: eigene Farbe (violett), damit es nicht wie ein Status-Badge wirkt */
.badge.demo { background:color-mix(in srgb, #7c3aed 12%, var(--surface)); color:color-mix(in srgb, #6d28d9 85%, var(--ink)); }

/* Profilbilder (Mein Konto): Bild füllt den Kreis, sonst Initialen */
.avatar.has-img { overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.gtop summary.avatar-sum::-webkit-details-marker { display:none; }
.acc-avatar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.acc-avatar .avatar { width:44px; height:44px; font-size:14px; }

/* Untergalerien als Liste in der Karte (statt Zeile über die ganze Breite) */
.sublist { list-style:none; margin:0; padding:0 8px 8px; }
.sublist li[data-archived="1"] { display:none; }
[data-gallery-actions] .danger, [data-gallery-actions] .danger .i { color:var(--danger); }
.sublist li { display:flex; align-items:center; gap:2px; }
.sublist li > a { flex:1; min-width:0; }
.sublist .skebab { width:36px; height:36px; border-radius:8px; color:var(--muted); cursor:pointer; }
.sublist .skebab:hover { background:var(--surface-alt); color:var(--ink); }
.sublist .skebab .i { width:18px; height:18px; color:inherit; }
.sublist a { display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 10px; border-radius:10px; color:var(--ink); text-decoration:none; }
.sublist a:hover { background:var(--surface-alt); }
.sublist .sthumb { flex:none; width:56px; height:40px; border-radius:6px; overflow:hidden; background:var(--surface-alt); }
.sublist .sthumb img { width:100%; height:100%; object-fit:cover; display:block; }
.sublist .sname { flex:1; min-width:0; font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sublist .sname small { display:block; font-size:12px; font-weight:400; color:var(--muted); }
.sublist .scount { flex:none; font-size:12px; color:var(--muted); }
.sublist .i { flex:none; width:14px; height:14px; color:var(--muted); }
.ggrid.flat .sublist, .ggrid.flat .sublist:not([hidden]) { display:none; }
body[data-view="list"] .sublist { flex-basis:100%; }

/* Galerie-Wechsler im Pfad: Baum mit Untergalerien unter ihrer Galerie, darunter Ersteller · Bilder · Datum */
.crumb .navpop { width:min(380px, calc(100vw - 32px)); padding:6px; }
.crumb .navpop .navg { display:flex; align-items:flex-start; gap:10px; padding:8px 10px 8px calc(10px + var(--depth, 0) * 22px); border-radius:8px; white-space:normal; }
.crumb .navpop .navg .i { flex:none; margin-top:2px; }
.crumb .navpop .navg > span { min-width:0; font-weight:500; line-height:1.3; }
.crumb .navpop .navg small { display:block; margin-top:2px; font-size:12px; font-weight:400; color:var(--muted); }
.crumb .navpop .navg[aria-current="page"] { background:var(--surface-alt); color:var(--ink); }

/* zuletzt: settingsTabs.js/app.js blenden Zeilen und Knöpfe über .hidden aus, das muss alle Regeln oben schlagen */
.lsm .hidden { display:none !important; }

/* Tooltips (tooltips.js) auch über der Lightbox (z-index 50) */
.tw-tooltip { z-index:60; width:max-content; max-width:min(240px, calc(100vw - 16px)); white-space:normal; text-align:center; }
/* Einstellungen: Infobox für längere Erklärungen (z. B. Speicherlimit) */
.set-info { display:flex; gap:10px; align-items:flex-start; margin-top:14px; padding:12px 14px; border-radius:10px; background:var(--surface-alt); color:var(--muted); font-size:13px; line-height:1.5; }
.set-info .i { flex:none; width:16px; height:16px; margin-top:1px; }
.set-info p { margin:0; }

/* Globale Suche (⌘K): Leiste in der Kopfzeile, öffnet sich über die Lupe */
.searchwrap { position:relative; }
.search { display:flex; align-items:center; gap:10px; height:42px; width:310px; max-width:100%; padding:0 8px 0 14px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface); color:var(--muted); }
.search:focus-within { outline:2px solid var(--accent); outline-offset:1px; }
.search input { flex:1; min-width:0; border:0; background:none; outline:0; font-size:13px; color:var(--ink); }
.search input::placeholder { color:var(--muted); }
.kbd { display:flex; gap:3px; }
.kbd kbd { min-width:22px; height:22px; padding:0 5px; display:grid; place-items:center; border:1px solid var(--border); border-radius:6px; font:500 11px var(--font-ui); color:var(--muted); background:var(--bg); }
.search-list { position:absolute; left:0; right:0; top:calc(100% + 6px); min-width:320px; max-height:min(60vh, 420px); overflow:auto; padding:6px; z-index:50; }
.search-list > p { margin:0; padding:14px 10px; font-size:14px; }
.search-list a { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:var(--radius-ctl); color:inherit; text-decoration:none; }
.search-list a[aria-selected="true"], .search-list a:hover { background:color-mix(in srgb, var(--ink) 7%, var(--surface)); }
.search-list a span { min-width:0; display:flex; flex-direction:column; }
.search-list a b { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-list a small { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Mobil: Leiste füllt die Kopfzeile (Pfad weicht), Trefferliste liegt fest unter der Kopfzeile über die ganze Breite */
@media (max-width:760px) {
  .kbd { display:none; }
  .searchwrap:not([hidden]) { flex:1; min-width:0; }
  .search { width:auto; }
  .search-list { position:fixed; left:12px; right:12px; top:64px; min-width:0; }
  .top:has(.searchwrap:not([hidden])) .crumb, .top:has(.searchwrap:not([hidden])) .spacer { display:none; }
}
.fb-item p { overflow-wrap:anywhere; }
.fb-item p > .muted { white-space:nowrap; }
/* Umgesetzt/Gesehen-Toggle wie in der Lightbox (#lightbox .insp--lb .cmt-status), hier außerhalb davon gebraucht:
   Name bleibt fest, Datum schrumpft/ellipsized zuerst, Toggle bleibt immer rechts auf derselben Zeile stehen
   (kein Umbruch auf eine eigene, isolierte Zeile mit Leerraum). */
.fb-cmt-head { display:flex; align-items:center; gap:6px; }
.fb-cmt-head b { flex:none; }
.fb-cmt-head .muted { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-item .cmt-status { display:inline-flex; align-items:center; flex:none; gap:2px; padding:2px; margin-left:auto; border-radius:9px; background:var(--surface-alt); }
.fb-item .cmt-state { width:24px; height:24px; border-radius:6px; color:var(--muted); }
.fb-item .cmt-state .i { width:13px; height:13px; }
.fb-item .cmt-state:hover { background:var(--surface); color:var(--ink); }
.fb-item .cmt-state[aria-pressed="true"] { background:var(--accent); color:#fff; }

/* Einstellungen: Reiter Proofing | Wallchemy */
.set-tabs { display:flex; gap:4px; margin:0 0 20px; border-bottom:1px solid var(--border); }
.set-tabs { overflow-x:auto; scrollbar-width:none; }
.set-tabs::-webkit-scrollbar { display:none; }
.set-tabs a { flex:none; white-space:nowrap; padding:10px 16px; margin-bottom:-1px; border-bottom:2px solid transparent; color:var(--muted); text-decoration:none; font-size:14px; }
.set-tabs a:hover { color:var(--ink); }
.set-tabs a[aria-current] { color:var(--ink); border-bottom-color:var(--ink); font-weight:600; }

/* Wallchemy-Einstellungen (wallchemy/includes/admin_panels.php): Seitenmenü und Karten wie oben, ohne Tailwind */
.set-nav :is(.tab-btn,.catalog-subtab,.catalog-newtab,.general-subtab) { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:10px; background:none; color:var(--muted); font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.set-nav :is(.tab-btn,.catalog-subtab,.catalog-newtab,.general-subtab):hover, .set-nav :is(.tab-btn,.catalog-subtab,.catalog-newtab,.general-subtab)[aria-current] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-card); }
.set-nav .tab-btn .i { width:17px; height:17px; }
.set-nav .set-sub { display:grid; gap:2px; margin:0 0 6px 27px; padding-left:8px; border-left:1px solid var(--border); }
.set-nav .set-sub.hidden { display:none; }
.set-nav .set-sub :is(a,.catalog-subtab,.catalog-newtab,.general-subtab) { padding:7px 10px; font-size:13px; }
.wc-save { display:grid; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.wc-save.hidden { display:none; }
.wc-save .btn { width:100%; justify-content:center; }
#wc-admin { color:var(--ink); }
#wc-admin .hidden { display:none !important; }
#wc-admin .tab-section h2 { margin:0 0 4px; font-size:18px; font-weight:600; color:var(--ink); }
#wc-admin .tab-section h3 { font-size:15px; font-weight:600; color:var(--ink); }
#wc-admin .tab-section h3:first-child, #wc-admin #bg-upload-form h3 { margin-top:18px; }
.wc-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:760px) { .wc-cols { grid-template-columns:minmax(0,1fr); } }
#wc-admin .catalog-edit-panel { border:0; padding:0; background:none; }
#wc-admin :is(input:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color]),select,textarea) { box-sizing:border-box; border:1px solid var(--border); border-radius:10px; background-color:var(--surface); color:var(--ink); font:inherit; font-size:14px; padding-left:12px; padding-right:12px; }
#wc-admin :is(input:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color]),select):not(table *) { height:44px; }
#wc-admin :is(input,select,textarea):focus-visible, #wc-admin button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
#wc-admin input[type=checkbox], #wc-admin input[type=radio] { accent-color:var(--accent); }
.wc-save .btn[data-state=saving] { cursor:wait; }
/* Unter 1024 px: Unterpunkte in derselben Zeile, Speichern/Abbrechen als feste Leiste unten statt im Menü */
@media (max-width:1023px) {
  .set-nav .set-sub { display:flex; gap:2px; margin:0; padding-left:0; border-left:0; }
  .set-nav :is(a,.tab-btn,.catalog-subtab,.catalog-newtab,.general-subtab) { width:auto; flex:none; white-space:nowrap; }
  .set-nav .set-sub.hidden { display:none; }
  .set-nav .wc-save { position:fixed; z-index:40; left:225px; right:0; bottom:0; display:flex; gap:8px; margin:0; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--border); }
  .set-nav .wc-save.hidden { display:none; }
  .set-nav .wc-save .btn { flex:1; min-height:44px; }
  .set-grid:has(.wc-save:not(.hidden)) .set-body { padding-bottom:100px; }
}
@media (max-width:760px) { .set-nav .wc-save { left:0; } }
.wc-save .btn[data-state=error] { background:var(--danger); border-color:var(--danger); color:#fff; }

/* Wallchemy: vom JS erzeugte Listen (Bibliothek, Wandbilder, Panel-Layout) */
.wc-item { border:1px solid var(--border); border-radius:var(--radius-ctl); background:var(--surface); margin-bottom:12px; }
.wc-item--warn { border-color:var(--danger); }
.wc-item-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; font-size:14px; flex-wrap:wrap; }
.wc-item-body { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; padding:12px 16px; border-top:1px solid var(--border); font-size:13px; }
.wc-inline { display:inline-flex; align-items:center; gap:10px; color:var(--muted); }
.wc-acts { display:flex; align-items:center; gap:8px; flex:none; }
@media (max-width:760px) {
  .wc-acts { flex-wrap:wrap; flex:1 1 auto; }
  .wc-inline { display:flex; flex-direction:column; align-items:stretch; gap:4px; width:100%; }
  .wc-inline select { width:100%; }
}
.wc-bg { display:flex; gap:16px; padding:16px; }
.wc-panel { display:flex; align-items:center; gap:6px; padding:6px 10px; margin-bottom:8px; }
.wc-grow { flex:1; }
#wc-admin .btn.btn-del { color:var(--danger); }
#wc-admin .btn.wc-mv { width:36px; padding:0; }
#wc-admin .wc-item .inp { width:auto; min-width:0; }
#wc-admin .wc-bg .inp { width:100%; }
.wc-cols { margin-bottom:24px; }
@media (max-width:640px) { .wc-bg { flex-direction:column; } }
.wc-csv-status { margin:-8px 0 12px; }
.wc-csv-status:empty { display:none; }
.wc-csv-status { font-size:13px; }
.wc-csv-status.is-err { color:var(--danger); }
.wc-choice { display:flex; flex-direction:column; gap:8px; }
.wc-choice .btn { height:auto; min-height:44px; padding:10px 16px; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; white-space:normal; }
.wc-choice .btn small { font-size:12px; font-weight:400; opacity:.75; }
.wc-panel-col { min-height:32px; }
.wc-tbl .col-handle { width:36px; }
.wc-tbl .col-s { width:110px; }
.wc-tbl .col-xs { width:80px; }
/* Bibliothek */
.wc-lib-name { display:flex; flex-direction:column; gap:2px; min-width:0; }
.wc-lib-name code { font-size:13px; }
.wc-tag { margin-left:6px; font-size:12px; color:var(--muted); }
.wc-tag.is-on { color:var(--accent); font-weight:600; }
.wc-warn { display:block; font-size:12px; color:var(--danger); }
.wc-chks { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; }
.wc-chk { display:inline-flex; align-items:center; gap:8px; min-height:32px; font-size:13px; white-space:nowrap; cursor:pointer; }
.wc-chk input { width:16px; height:16px; margin:0; flex:none; }
.library-status-count { flex-basis:100%; font-size:13px; }
.library-status-count.is-err { color:var(--danger); font-weight:600; }
.library-status-count.is-warn { color:var(--danger); }
.wc-sub { padding:12px 16px; border-top:1px solid var(--border); font-size:13px; }
.wc-sublist { display:flex; flex-direction:column; gap:2px; margin:6px 0 0 24px; }
/* Wandbilder */
.wc-bg-thumb { position:relative; width:176px; height:112px; flex:none; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-ctl); background:var(--surface-alt); }
.wc-bg-thumb img { display:block; width:100%; height:100%; object-fit:contain; }
.wc-bg-thumb .drag-handle { position:absolute; top:6px; left:6px; padding:0 5px; border-radius:6px; background:var(--surface); color:var(--ink); font-size:16px; line-height:1.4; box-shadow:var(--shadow-card); }
.wc-bg-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; font-size:13px; }
.wc-bg-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.wc-bg-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; color:var(--muted); }
.wc-bg-meta .is-warn { color:var(--danger); }
.wc-bg-opts { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; }
#wc-admin .wc-zone-num { width:110px; }
@media (max-width:640px) { .wc-bg-thumb { width:100%; height:160px; } }
.wc-guide { max-height:24rem; overflow:auto; white-space:pre; tab-size:2; font-size:12px; background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius-ctl); padding:12px; margin-top:12px; }

/* Wallchemy-Katalog: gemeinsame Bausteine für alle Katalog-Bereiche */
.wc-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.wc-head h2 { margin:0; }
.wc-head-info { display:none; }
@media (max-width:760px) {
  .wc-head p.muted { display:none; }
  .wc-head p.muted.is-open { display:block; flex-basis:100%; order:3; margin-top:4px; }
  .wc-head-info { display:inline-flex; }
}
.wc-json { margin-top:16px; }
.wc-sum { cursor:pointer; user-select:none; font-size:13px; color:var(--muted); }
.wc-json textarea { width:100%; min-height:20rem; margin-top:8px; font-size:12px; font-family:ui-monospace,monospace; }
.wc-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.wc-tbl th { text-align:left; font-weight:600; color:var(--muted); font-size:12px; padding:0 8px 8px 0; border-bottom:1px solid var(--border); }
.wc-tbl td { padding:6px 8px 6px 0; border-bottom:1px solid var(--border); vertical-align:middle; }
.wc-tbl tr:last-child td { border-bottom:0; }
#wc-admin .wc-tbl :is(input:not([type=checkbox],[type=color]),select) { height:36px; padding:0 10px; width:100%; }
#wc-admin .wc-tbl input[type=color] { width:44px; height:36px; padding:2px; cursor:pointer; }
.wc-tbl .drag-handle { cursor:grab; color:var(--muted); font-size:18px; }
.wc-del { width:36px; height:36px; border:1px solid var(--border); border-radius:var(--radius-ctl); background:var(--surface); color:var(--danger); font-size:18px; line-height:1; cursor:pointer; }
.wc-del:hover { background:var(--surface-alt); }
#wc-admin .wc-tbl tr { border-width:0; }

/* Wallchemy-Katalog: Rahmen */
.wc-fr-head { display:flex; align-items:center; gap:12px; padding:10px 16px; }
.wc-swatch { width:36px; height:36px; flex:none; border-radius:8px; border:1px solid var(--border); }
.wc-fr-name { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; border:0; background:none; padding:0; text-align:left; cursor:pointer; color:var(--ink); }
.wc-fr-name strong { font-size:14px; font-weight:600; }
.wc-fr-name small { font-size:12px; color:var(--muted); }
.wc-fr-meta { font-size:13px; color:var(--muted); white-space:nowrap; }
.wc-fr-body { border-top:1px solid var(--border); padding:8px 16px 16px; }
.wc-sub-h { margin:20px 0 4px !important; font-size:12px !important; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; }
.wc-fr-body .wc-json { margin:16px 0 8px; }
#wc-admin input.wc-color { width:56px; height:44px; padding:2px; border-radius:10px; cursor:pointer; }
#wc-admin .wc-fr-body .inp[type=number] { width:110px; }
#wc-admin .wc-fr-body .inp-row .inp[type=text] { flex:1; min-width:0; }
.texture-preview { width:44px; height:44px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }
.wc-hang { display:flex; flex-direction:column; gap:10px; min-width:0; }
.wc-hp { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.wc-hp label, .wc-hr-head label { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
#wc-admin .wc-hp .inp[data-k=label] { flex:1; min-width:140px; }
#wc-admin .wc-hp .wc-del { height:44px; width:44px; }
.wc-hr { border:1px solid var(--border); border-radius:var(--radius-ctl); padding:12px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.wc-hr-head { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; flex-wrap:wrap; }
.wc-fr-head { gap:16px; }
.wc-fr-meta { padding:0 8px; }
.wc-hp { gap:12px 20px; }
.wc-hp label, .wc-hr-head label { gap:8px; }
.wc-hp label .muted, .wc-hr-head label .muted { margin-left:2px; }
#wc-admin .wc-hp .inp[type=number], #wc-admin .wc-hr-head .inp[type=number] { width:96px; }
.wc-hang [data-list] { display:flex; flex-direction:column; gap:14px; width:100%; }
.wc-hang [data-list]:empty { display:none; }
.wc-hp { gap:12px 28px; }
.wc-hang { gap:16px; }
.wc-more { margin-top:20px; border-top:1px solid var(--border); padding-top:12px; }
.wc-more-sum { cursor:pointer; user-select:none; font-size:14px; font-weight:600; padding:6px 0; }
.wc-group-h { margin:20px 0 8px; padding:0 4px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.wc-group-h:first-child { margin-top:0; }

/* Wallchemy-Katalog: Preise (Liste je Format, Zusammenfassung darf umbrechen) */
.wc-fr-meta.wc-price-sum { white-space:normal; text-align:right; flex:0 1 auto; }

/* Wallchemy-Katalog: Vorlagen (Liste, Editor- und Import-Dialog) */
.wc-tpl-status { margin:0 0 12px; font-size:13px; }
.wc-tpl-status:empty { display:none; }
.wc-tpl-status.is-err { color:var(--danger); }
.wc-tpl-thumb { width:56px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; padding:4px; background:var(--surface-alt); border:1px solid var(--border); border-radius:8px; font-size:10px; color:var(--muted); text-align:center; }
.wc-tpl-thumb svg { width:100%; height:100%; }
.wc-tpl-thumb rect { fill:var(--surface); stroke:var(--ink); stroke-width:.8; vector-effect:non-scaling-stroke; }
.wc-tpl-stage { width:100%; height:220px; padding:12px; font-size:13px; }
.wc-tpl-dlg { width:min(1100px, calc(100% - 32px)); }
.wc-tpl-meta { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.wc-fld { display:flex; flex-direction:column; gap:6px; }
.wc-fld .lbl { font-size:13px; font-weight:600; }
#wc-admin .wc-fld .inp { max-width:none; }
.wc-tpl-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(16rem,.6fr); gap:20px; margin-top:20px; }
.wc-tpl-grid .wc-sub-h:first-child { margin-top:0 !important; }
#wc-admin textarea.wc-tpl-json { display:block; width:100%; max-width:none; height:auto; min-height:8rem; padding:12px; font-family:ui-monospace,monospace; font-size:12px; line-height:1.5; }
#wc-admin #template-json { min-height:26rem; }
#wc-admin #template-import-json { margin:16px 0 12px; }
.wc-tpl-ids { margin-top:12px; }
.wc-tpl-ref:not(.hidden) { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.wc-tpl-ref .wc-sub-h { margin-top:12px !important; }
.wc-tpl-val { margin-top:12px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-ctl); background:var(--surface-alt); font-size:13px; line-height:1.45; }
.wc-tpl-val p { margin:0 0 4px; }
.wc-tpl-val ul { margin:0 0 8px; padding-left:18px; list-style:disc; }
.wc-tpl-val.is-err { border-color:var(--danger); color:var(--danger); background:var(--surface); }
.wc-tpl-val.is-warn { border-color:var(--accent); background:var(--surface); }
#wc-admin .btn:disabled { opacity:.45; cursor:not-allowed; }
@media (max-width:900px) { .wc-tpl-grid, .wc-tpl-meta, .wc-tpl-ref:not(.hidden) { grid-template-columns:1fr; } }
.wc-pick-tools { margin:4px 0 8px; }
.wc-pick { max-height:50vh; overflow:auto; }
.wc-pick .wc-group-h { margin:16px 0 4px; }
.wc-pick-opt { align-items:flex-start !important; padding:6px 0; }
.wc-pick-opt input { margin-top:2px !important; }
.wc-pick-opt strong { display:block; font-weight:500; }
.wc-pick-opt small { display:block; font-size:12px; color:var(--muted); }
.wc-choice .btn small:empty { display:none; }
.wc-pickcell { flex:1; min-width:0; max-width:420px; }
#wc-admin .wc-pickbtn { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; height:auto; min-height:44px; padding:6px 12px; text-align:left; cursor:pointer; }
.wc-pickbtn small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--muted); }

/* Wallchemy-Katalog: Formate */
.wc-tools { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
#wc-admin .wc-tools .inp { width:auto; flex:1 1 180px; min-width:0; }
.wc-selbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; min-height:44px; margin-bottom:12px; font-size:13px; }
.wc-selbar-acts { display:none; gap:8px; flex-wrap:wrap; }
.wc-selbar.has-sel .wc-selbar-acts { display:flex; }
.wc-selbar.has-sel { padding:4px 4px 4px 12px; border-radius:var(--radius-ctl); background:var(--surface-alt); }
.wc-size { display:inline-flex; align-items:center; gap:6px; }
#wc-admin .wc-size .inp { width:76px; }
#formats-tbody [data-picker-kind] { min-height:44px; padding:4px 12px; }
#wc-admin #formats-tbody .wc-fr-body input[data-field=id], #wc-admin #formats-tbody .wc-fr-body input[data-field=dinSize] { width:200px; }
.set-nav .set-sub .catalog-newtab { padding-left:24px; }
#catalog-new-form .wc-fr-head, #catalog-new-form .drag-handle, #catalog-new-form .wc-del { display:none; }
#catalog-new-form .wc-item { border:0; margin:0; }
#catalog-new-form .wc-fr-body { border-top:0; padding:0; }

/* Mobil: lange Hinweise hinter Info-Knopf (shell.js), Wallchemy-Listen gestapelt */
.info-tip { display:none; }
.wc-bg-meta > span { white-space:nowrap; }
.wc-zone-ok { color:var(--ink); }
@media (max-width:760px) {
  .info-tip { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:-12px -10px -12px -4px; padding:0; border:0; background:none; color:var(--muted); vertical-align:middle; cursor:pointer; }
  .info-tip .i { width:18px; height:18px; }
  .info-tip[aria-expanded="true"] { color:var(--ink); }
  .tip-text:not(.is-open) { display:none !important; }
  .wc-bg-top > .wc-grow { flex:1 1 100%; }
  .wc-bg-top > .wc-acts .btn, .wc-fr-head > .wc-acts .btn { flex:1; min-height:44px; justify-content:center; }
  .wc-fr-head { flex-wrap:wrap; gap:8px 12px; padding:12px; }
  .wc-fr-name { flex:1 1 0; }
  .wc-fr-meta, .wc-fr-meta.wc-price-sum { flex-basis:100%; padding:0; white-space:normal; text-align:left; }
  .wc-fr-head > .wc-acts { flex-basis:100%; }
}