/* Eigene Bilder (media.js, docs ADR 0019) und Projektseite mit Verwaltung (project.js, docs ADR 0020).
   Nach theme.css geladen, vor light.css. Farben nur über Tokens, damit der helle Modus mitzieht. */

/* ---------------------------------------------------------------- Eigene Bilder über Initialen und Grafiken */
.av img, .slogo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.slogo { position:relative; overflow:hidden; }
.ph-user { position:relative; }

/* Melden (Art. 16 DSA) und Ändern direkt auf dem Bild */
.img-report { position:absolute; z-index:3; top:12px; right:12px; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:50%;
  background:rgba(18,19,29,.6); color:#edf2f4; cursor:pointer; opacity:.75; backdrop-filter:blur(4px); }
.img-report:hover, .img-report:focus-visible { opacity:1; background:var(--accent); }
.img-report svg.i { width:15px; height:15px; }
.img-report.on-pic { top:8px; right:auto; left:calc(50% + 44px); opacity:0; }
.ph-user:hover .img-report.on-pic, .img-report.on-pic:focus-visible { opacity:.85; }
@media (hover:none) { .img-report.on-pic { opacity:.7; } }
.img-edit { position:absolute; z-index:3; }
.img-edit.cover { right:16px; bottom:16px; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
/* Im Profil- und Studiokopf stehen unten rechts die Knöpfe (.ph-acts), deshalb dort oben rechts. */
.ph-cover .img-edit.cover { top:16px; bottom:auto; }
.img-edit label.btn:focus-within { outline:2px solid #fff; outline-offset:2px; }
/* Profilbild und Logo: Überblendung direkt auf dem Bild, sichtbar bei Maus darüber oder Tastaturfokus. */
.img-edit.on-pic { top:27.27px; left:calc(50% - 50px); width:100px; height:109.45px; }
.img-edit.on-pic > label.btn { width:100%; height:100%; padding:0; border-radius:0; flex-direction:column; gap:6px; opacity:0; transition:opacity .15s;
  background:rgba(18,19,29,.62); font-size:.85rem; -webkit-mask:var(--hexav-img) 0 0/100% 100% no-repeat; mask:var(--hexav-img) 0 0/100% 100% no-repeat; }
.img-edit.on-pic > label.btn:hover { background:rgba(18,19,29,.72); }
/* Ohne Weichzeichner: backdrop-filter hält sich nicht an die Sechseck-Maske und franst an den Ecken aus. */
.img-edit.on-pic > label.btn, :root[data-theme="light"] .img-edit.on-pic > label.btn { backdrop-filter:none; }
.img-edit.on-pic > label.btn svg.i { width:22px; height:22px; }
.img-edit.on-pic:hover > label.btn, .img-edit.on-pic:focus-within > label.btn { opacity:1; }
.img-edit.on-pic > label.btn:focus-within { outline:0; }
.img-edit-short { display:none; }
.img-edit.on-pic .img-edit-short { display:block; }
.img-edit.on-pic.logo { top:0; left:calc(50% - 60px); width:120px; height:120px; }
.img-edit.on-pic.logo > label.btn { -webkit-mask:none; mask:none; border-radius:24px; }
.ph-user .hexav-lvl { z-index:4; }
@media (hover:none) {
  .img-edit.on-pic > label.btn { opacity:1; justify-content:flex-end; padding-bottom:18px; background:linear-gradient(to top, rgba(18,19,29,.8), rgba(18,19,29,0) 50%); }
  .img-edit.on-pic > label.btn svg.i { display:none; }
}
@media (max-width:900px) {
  .img-edit.on-pic.logo { left:calc(50% - 48px); width:96px; height:96px; }
  .img-edit.on-pic.logo > label.btn { border-radius:20px; }
}
@media (max-width:640px) {
  .img-edit.on-pic:not(.logo) { top:22.11px; left:calc(50% - 40.54px); width:81.08px; height:88.74px; }
}
.img-edit .btn, :root[data-theme="light"] .img-edit .btn { background:rgba(18,19,29,.68); color:#edf2f4; box-shadow:none; backdrop-filter:blur(4px); }
.img-edit .btn:hover, :root[data-theme="light"] .img-edit .btn:hover { background:var(--accent); color:#fff; }
.img-edit .btn:has(input:disabled) { opacity:.6; cursor:progress; }
.btn.icon-only { width:36px; padding:0; }
.img-edit .form-msg:empty { display:none; }
.img-edit .form-msg { max-width:280px; }
.img-edit.on-pic .form-msg { position:absolute; top:calc(100% + 60px); left:50%; transform:translateX(-50%); width:260px; text-align:left; }
.img-edit .notice { box-shadow:var(--shadow); font-size:.85rem; }

/* Bildfeld in Formularen: Vorschau in der echten Form, daneben Hochladen und Entfernen */
.img-field { display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:center; }
.img-prev { position:relative; overflow:hidden; background:var(--card-2); flex:none; }
.img-prev.hex { width:96px; height:106px; -webkit-mask:var(--hex-fill) 0 0/100% 100% no-repeat; mask:var(--hex-fill) 0 0/100% 100% no-repeat; }
.img-prev.square { width:96px; height:96px; border-radius:16px; }
.img-prev.wide { width:260px; aspect-ratio:4/1; border-radius:10px; }
.img-prev.land { width:260px; aspect-ratio:16/9; border-radius:10px; }
.img-prev > img, .img-prev > .art, .img-prev > svg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.img-acts b { display:block; font-size:1rem; }
.img-acts small { display:block; color:var(--muted); font-size:.85rem; margin:2px 0 10px; }
.img-acts .row-acts { flex-wrap:wrap; gap:8px; }
.img-acts .form-msg:not(:empty) { margin-top:10px; }

/* Zuschneiden */
.crop-dlg { width:min(780px, calc(100vw - 24px)); }
.crop-dlg h2 { font-size:1.6rem; }
.crop-stage { position:relative; margin:4px auto 0; max-width:100%; border-radius:10px; overflow:hidden; cursor:grab; touch-action:none;
  background:#12131d repeating-conic-gradient(#1b1d2c 0 25%, #12131d 0 50%) 0 0/20px 20px; }
.crop-stage:active { cursor:grabbing; }
.crop-stage:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.crop-stage canvas { display:block; }
.crop-guide { position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.85); border-radius:inherit; }
.crop-stage.hex .crop-guide { box-shadow:none; background:rgba(5,6,12,.58);
  -webkit-mask:linear-gradient(#000 0 0), var(--hex-fill) 0 0/100% 100% no-repeat; -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0), var(--hex-fill) 0 0/100% 100% no-repeat; mask-composite:exclude; }
.crop-zoom { display:flex; align-items:center; gap:12px; color:var(--muted); }
.crop-zoom input { flex:1; accent-color:var(--accent); }

/* ---------------------------------------------------------------- Projektseite: Galerie links, Infospalte rechts */
.pp { display:grid; grid-template-columns:minmax(0,1fr) 360px; grid-template-rows:auto 1fr; gap:20px; align-items:start; }
.pp-side { grid-column:2; grid-row:1 / span 2; display:grid; gap:16px; min-width:0; }
.pp-gal { grid-column:1; grid-row:1; min-width:0; }
.pp-main { grid-column:1; grid-row:2; display:grid; gap:16px; min-width:0; }
.pp-main .ph-nav { margin-top:0; }
.pp-info-col { display:grid; gap:16px; }
.draft-note { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; border-color:var(--accent); }
.draft-note > svg.i { width:18px; height:18px; flex:none; margin-top:3px; color:var(--accent); }
.draft-note a { color:var(--accent); font-weight:700; margin-left:4px; }

.box.pp-head { padding:0; overflow:hidden; }
.pp-body { padding:0 20px 20px; }
.pp-key { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--card-2); isolation:isolate; }
.pp-key > .art, .pp-key > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.pp-key .img-edit.cover { right:12px; bottom:12px; }
.pp-pills { display:flex; gap:6px; flex-wrap:wrap; margin-top:18px; }
.pp-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:10px; }
.pp-title h1 { font-size:1.9rem; margin:0; line-height:1.1; overflow-wrap:anywhere; }
.pp-tag { color:var(--muted); margin:6px 0 16px; font-weight:600; line-height:1.4; }
.pp-head .play-big { margin-top:4px; }
.pp-head #play-msg { margin:8px 0 0; }
.rail .ov .stat-row { grid-template-columns:repeat(auto-fit, minmax(84px, 1fr)); }
.pp-acts { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px; }
.pp-acts .social-acts:empty { display:none; }

/* Favoriten: Herz mit Zähler */
.fav { display:inline-flex; align-items:center; gap:6px; flex:none; height:36px; padding:0 12px; border-radius:999px; border:0; cursor:pointer;
  background:var(--card-2); color:var(--muted); font-family:inherit; font-weight:700; font-size:.9rem; line-height:1; }
.fav svg.i { width:18px; height:18px; }
.fav:hover:not(:disabled) { color:var(--fg); }
.fav.on { color:var(--accent); background:rgba(239,35,60,.12); }
.fav.on svg.i { fill:currentColor; }
.fav:disabled { opacity:.55; cursor:not-allowed; }
.fav:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Studio- oder Creator-Karte */
a.box.pp-owner { display:flex; align-items:center; gap:14px; padding:16px 18px; color:var(--fg); transition:border-color .15s; }
a.box.pp-owner:hover { border-color:var(--accent); }
.pp-owner .t { flex:1; min-width:0; display:grid; }
.pp-owner .t small { color:var(--muted); font-size:.8rem; line-height:1.3; }
.pp-owner .t small:first-child { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.pp-owner .t b { font-size:1.1rem; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-owner > svg.i { width:18px; height:18px; color:var(--muted); }
.pp-owner .slogo.l, .pp-owner .av.l { width:56px; height:56px; font-size:1.3rem; }
.pp-owner .av.l { height:62px; }

/* Entwicklungsstufe als Stepper */
.stepper { list-style:none; margin:6px 0 12px; padding:0; display:grid; grid-template-columns:repeat(5, 1fr); }
.stepper li { position:relative; display:grid; justify-items:center; gap:8px; text-align:center; font-size:.76rem; font-weight:700; color:var(--muted-2); line-height:1.1; }
.stepper li::before { content:""; position:absolute; top:8px; left:-50%; width:100%; height:3px; background:var(--card-2); }
.stepper li:first-child::before { display:none; }
.stepper li.done::before, .stepper li.on::before { background:var(--accent); }
.stepper i { position:relative; width:19px; height:19px; border-radius:50%; background:var(--card-2); box-shadow:0 0 0 3px var(--surface); }
.stepper li.done i { background:var(--accent); }
.stepper li.on i { background:var(--accent); box-shadow:0 0 0 3px var(--surface), 0 0 0 6px rgba(239,35,60,.3), 0 0 16px rgba(239,35,60,.55); }
.stepper li.done span { color:var(--muted); }
.stepper li.on span { color:var(--fg); }
.pp-stage p { margin:0; }

/* Kleine Chips für Tags, Links und Zeiträume */
.chips a.chip, a.chip { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:8px; background:var(--card-2); border:1px solid transparent;
  color:var(--muted); font:700 .84rem/1 var(--text); letter-spacing:0; text-transform:none; box-shadow:none; }
.chips a.chip:hover, a.chip:hover { color:var(--fg); border-color:var(--line); }
a.chip svg.i { width:14px; height:14px; }
.pp-info .chips { margin:14px 0 0; gap:6px; }
.pp-info .kv dd a { color:var(--fg); }
.pp-info .kv dd a:hover { color:var(--accent); }
:root[data-theme="light"] .chips a.chip { background:var(--card-2); }

/* Zahlen */
.pp-nums { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.pp-nums span { background:var(--card-2); border-radius:10px; padding:12px 14px; min-width:0; }
.pp-nums b { display:block; font:700 1.6rem/1 var(--text); }
.pp-nums small { display:block; margin-top:4px; color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.pp-nums .hot b { color:var(--accent); }

/* Galerie: große Bühne, darunter die Leiste */
.gal-stage { position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#0d0e17; isolation:isolate; box-shadow:var(--shadow); }
.empty-gal .gal-stage > .art, .empty-gal .gal-stage > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.gal-hint { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px;
  background:rgba(18,19,29,.72); color:#edf2f4; font-weight:700; backdrop-filter:blur(4px); white-space:nowrap; }
.gal-hint:hover { background:var(--accent); color:#fff; }
.gal-item { position:absolute; inset:0; margin:0; }
.gal-item[hidden] { display:none; }
.gal-zoom { display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.gal-zoom img { display:block; width:100%; height:100%; object-fit:contain; }
.gal-zoom { position:relative; }
.gal-zoom .art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gal-zoom img:not(.art) { position:relative; }
.gal-item figcaption { position:absolute; left:0; right:0; bottom:0; padding:36px 70px 14px 18px; background:linear-gradient(transparent, rgba(5,6,12,.78));
  color:#edf2f4; font-weight:600; pointer-events:none; }
.gal-arr { position:absolute; z-index:2; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:rgba(18,19,29,.62); color:#edf2f4; cursor:pointer; backdrop-filter:blur(4px); transition:background .15s; }
.gal-arr:hover, .gal-arr:focus-visible { background:var(--accent); }
.gal-arr.l { left:12px; }
.gal-arr.r { right:12px; }
.gal-arr svg.i { width:20px; height:20px; }
.gal-n { position:absolute; z-index:2; left:12px; top:12px; padding:4px 9px; border-radius:6px; background:rgba(18,19,29,.62); color:#edf2f4; font-size:.8rem; font-weight:700; }
.gal-yt, .gal-zoom, .gal-th { font:inherit; }
.gal-yt { position:absolute; inset:0; display:grid; place-items:center; width:100%; padding:20px; border:0; cursor:pointer; color:#edf2f4; text-align:center;
  background:var(--hex) center/56px 96px, radial-gradient(circle at 50% 40%, #2b2d42, #0d0e17 75%); }
.gal-yt-c { display:grid; justify-items:center; gap:8px; max-width:440px; }
.gal-yt-p { display:grid; place-items:center; width:76px; height:76px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 8px rgba(239,35,60,.22), 0 12px 30px -6px rgba(239,35,60,.7);
  transition:transform .15s; }
.gal-yt-p svg.i { width:30px; height:30px; fill:#fff; stroke:none; margin-left:4px; }
.gal-yt:hover .gal-yt-p, .gal-yt:focus-visible .gal-yt-p { transform:scale(1.06); }
.gal-yt b { font-size:1.2rem; }
.gal-yt small { color:#b9c1d0; font-size:.85rem; line-height:1.4; }
.gal-frame { position:absolute; inset:0; width:100%; height:100%; border:0; }
.gal-strip { display:flex; gap:8px; overflow-x:auto; padding:10px 2px 6px; scrollbar-width:thin; }
.gal-th { position:relative; flex:none; width:124px; aspect-ratio:16/9; padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden; background:var(--card-2);
  cursor:pointer; opacity:.68; transition:opacity .15s, border-color .15s; }
.gal-th:hover { opacity:1; }
.gal-th.on { border-color:var(--accent); opacity:1; }
.gal-th:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.gal-th img, .gal-th .art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gal-th-v { position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(circle at 50% 40%, #2b2d42, #0d0e17 80%); color:#edf2f4; }
.gal-th-v svg.i { width:26px; height:26px; }

/* Bild groß */
dialog.lightbox { padding:0; border:0; background:transparent; max-width:96vw; max-height:94vh; overflow:visible; }
dialog.lightbox::backdrop { background:rgba(5,6,12,.9); }
dialog.lightbox img { display:block; max-width:96vw; max-height:92vh; border-radius:8px; }
.lb-x { position:fixed; top:16px; right:16px; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; }
.lb-x:hover, .lb-x:focus-visible { background:var(--accent); }

/* About als Markdown */
.md { color:var(--prose); line-height:1.65; overflow-wrap:anywhere; }
.md > :first-child { margin-top:0; }
.md > :last-child { margin-bottom:0; }
.md h3 { font-size:1.35rem; margin:22px 0 8px; color:var(--fg); }
.md h4 { font-size:1.12rem; margin:18px 0 6px; color:var(--fg); }
.md h5 { font-size:1rem; margin:16px 0 6px; color:var(--fg); text-transform:uppercase; letter-spacing:.06em; }
.md p { margin:0 0 12px; }
.md ul, .md ol { margin:0 0 12px; padding-left:22px; }
.md li { margin:3px 0; }
.md li::marker { color:var(--accent); }
.md blockquote { margin:0 0 12px; padding:10px 16px; border-left:3px solid var(--accent); background:var(--card-2); border-radius:0 8px 8px 0; }
.md blockquote p { margin:0; }
.md code { padding:1px 6px; border-radius:5px; background:var(--card-2); font-size:.9em; }
.md a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.md strong { color:var(--fg); }
.pp-about h2.box-t { font:400 1.35rem/1 var(--display); letter-spacing:.04em; text-transform:uppercase; margin:0 0 16px; }

/* ---------------------------------------------------------------- Verwaltung */
.pm-head { display:flex; gap:20px; align-items:center; margin-bottom:16px; }
.pm-key { position:relative; flex:none; width:220px; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:var(--card-2); isolation:isolate; }
.pm-key > .art, .pm-key > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.pm-t { flex:1; min-width:0; }
.pm-t h1 { font-size:1.9rem; margin:8px 0 2px; line-height:1.1; overflow-wrap:anywhere; }
.pm-t p { margin:2px 0 0; }
.pm-t .pp-pills { margin:0; }
.pm-acts { display:flex; gap:8px; flex-wrap:wrap; }
.pm form.stack { max-width:none; }
.hub-gl a > span { display:inline-flex; align-items:center; gap:10px; }
.hub-gl a > span svg.i { width:16px; height:16px; opacity:.8; }
.box h3.box-t > span.muted { font:600 .85rem/1 var(--text); letter-spacing:0; text-transform:none; color:var(--muted); }
.pm-dashboard .stat-row { grid-template-columns:repeat(4, 1fr); }
.range { display:flex; gap:8px; flex-wrap:wrap; }
.range a.chip.on { background:var(--accent); color:#fff; }

/* Diagramme: eine Reihe pro Diagramm, Achsen zurückhaltend, Tooltip dunkel */
.pm-chart { min-width:0; }
.chart { position:relative; margin:0; }
.chart-plot { position:relative; min-height:190px; border-radius:8px; }
.chart-plot:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.chart-plot svg { display:block; overflow:visible; }
.chart line.grid { stroke:var(--line); stroke-width:1; }
.chart line.base { stroke:var(--muted-2); stroke-width:1; }
.chart text { fill:var(--muted); font:600 11px/1 var(--text); }
.chart text.yl { text-anchor:end; }
.chart rect.col { fill:transparent; }
.chart rect.col.on { fill:rgba(141,153,174,.1); }
.chart path.bar { fill:var(--accent); }
.chart path.bar.on { fill:var(--accent-strong, #d90429); }
.chart-tip { position:absolute; z-index:3; transform:translate(-50%, -100%); padding:7px 11px; border-radius:8px; background:#2b2d42; color:#edf2f4; pointer-events:none;
  white-space:nowrap; box-shadow:0 10px 24px -8px rgba(0,0,0,.5); }
.chart-tip b { display:block; font-size:.95rem; }
.chart-tip small { display:block; color:#b9c1d0; font-size:.78rem; }
.chart-table { margin-top:10px; }
.chart-table summary { cursor:pointer; color:var(--muted); font-size:.85rem; font-weight:700; }
.chart-table table { width:100%; margin-top:8px; border-collapse:collapse; font-size:.86rem; }
.chart-table th, .chart-table td { text-align:left; padding:5px 8px; border-bottom:1px solid var(--line); }
.chart-table td:last-child, .chart-table th:last-child { text-align:right; }
.chart-table tbody { display:block; max-height:240px; overflow:auto; }
.chart-table thead, .chart-table tbody tr { display:table; width:100%; table-layout:fixed; }

/* Checkliste und Sichtbarkeit */
.pm-check .meter { margin-bottom:6px; }
.checks { list-style:none; margin:10px 0 0; padding:0; display:grid; }
.checks li { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.checks li:first-child { border-top:0; }
.checks .ck { display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--input-line); color:#fff; }
.checks li.done .ck { background:var(--accent); box-shadow:none; }
.checks .ck svg.i { width:14px; height:14px; stroke-width:3; }
.checks .t { flex:1; min-width:0; display:grid; }
.checks .t b { font-size:.95rem; line-height:1.2; }
.checks .t small { color:var(--muted); font-size:.8rem; line-height:1.3; }
.checks li.done .t b { color:var(--muted); }
.checks .req { font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-left:4px; }
.vis-state { display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; }
.vis-state .pill { flex:none; margin-top:2px; }
.vis-state small { color:var(--muted); font-size:.88rem; line-height:1.4; }
.pm-vis .pact-form .form-msg:not(:empty), .danger .pact-form .form-msg:not(:empty) { margin-top:10px; }

/* Details: Auswahl als Chips */
.pick { border:0; padding:0; margin:0; min-width:0; }
.pick legend { padding:0; margin-bottom:8px; font-weight:700; font-size:.92rem; }
.pick-row { display:flex; gap:6px; flex-wrap:wrap; }
.pick-c { position:relative; display:inline-flex; margin:0; }
.pick-c input { position:absolute; opacity:0; width:1px; height:1px; }
.pick-c span { display:inline-flex; align-items:center; height:34px; padding:0 13px; border-radius:8px; background:var(--card-2); border:1px solid var(--line);
  font-weight:700; font-size:.88rem; color:var(--muted); cursor:pointer; transition:background .12s, color .12s; }
.pick-c span:hover { color:var(--fg); }
.pick-c input:checked + span { background:var(--accent); border-color:var(--accent); color:#fff; }
.pick-c input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.pick-c input:disabled + span { opacity:.45; cursor:not-allowed; }
small.count { display:block; margin-top:6px; color:var(--muted); font-size:.82rem; }
small.count.short { color:var(--accent); }

/* Medien */
.pm-add { margin:14px 0 6px; align-items:start; }
.pm-shots { display:grid; gap:8px; justify-items:start; }
.pm-shots label.btn.disabled { opacity:.45; pointer-events:none; }
.pm-shots small { font-size:.82rem; }
.pm-items { list-style:none; margin:16px 0 0; padding:0; display:grid; }
.pm-item { display:grid; grid-template-columns:140px minmax(0,1fr) auto; gap:16px; align-items:center; padding:12px 0; border-top:1px solid var(--line); }
.pm-th { position:relative; width:140px; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:var(--card-2); }
.pm-th img, .pm-th .art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pm-item.removed .pm-th { opacity:.4; }
.pm-meta { display:grid; gap:6px; min-width:0; }
.pm-meta > small { color:var(--muted); font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.pm-meta p { margin:0; }
.pm-cap { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pm-cap input { flex:1; min-width:160px; }
.pm-cap .form-msg { flex-basis:100%; }
.pm-cap .form-msg:empty { display:none; }
.pm-move { display:flex; gap:6px; }
.pm-move .icon-btn { width:38px; height:38px; }
.pm-move .icon-btn:disabled { opacity:.35; cursor:not-allowed; }
.pm-move svg.i { width:17px; height:17px; }

/* Gefahrenzone */
.box.danger { border-color:rgba(239,35,60,.4); }
.box.danger p { margin:0 0 14px; }
.btn.danger-btn { background:transparent; color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent); }
.btn.danger-btn:hover:not(:disabled) { background:var(--accent); color:#fff; }
:root[data-theme="light"] .btn.danger-btn { color:var(--accent); }
:root[data-theme="light"] .btn.danger-btn:hover:not(:disabled) { color:#fff; }

/* ---------------------------------------------------------------- Mein Bereich: eigene Projekte */
.tile.mine { gap:8px; }
.tile-a { display:block; border-radius:var(--radius); }
.tile-a .thumb { transition:transform .18s, box-shadow .18s; }
.tile-a:hover .thumb { transform:translateY(-3px); box-shadow:var(--glow); }
.tile.mine h3 a { color:var(--fg); }
.tile.mine h3 a:hover { color:var(--accent); }
.tile.mine .meta svg.i { width:13px; height:13px; vertical-align:-2px; }
.tile.mine > .btn { align-self:flex-start; margin-top:2px; }
.sec-sub { margin:2px 0 0; }
.profile-body .sec:first-child { margin-top:8px; }

/* ---------------------------------------------------------------- Kleinere Bildschirme */
@media (max-width:1180px) {
  .pp { grid-template-columns:minmax(0,1fr) 320px; }
}
@media (max-width:920px) {
  .pp { display:flex; flex-direction:column; gap:16px; }
  .pp > * { width:100%; }
  .pp-side { display:contents; }
  .pp-head { order:1; }
  .pp-gal { order:2; }
  .pp-main { order:3; }
  .pp-info-col { order:4; }
  .pm-head { flex-wrap:wrap; }
  .pm-key { width:160px; }
}
@media (max-width:640px) {
  .pm-key { width:100%; }
  .pm-dashboard .stat-row { grid-template-columns:repeat(2, 1fr); }
  .pm-item { grid-template-columns:96px minmax(0,1fr); }
  .pm-th { width:96px; }
  .pm-move { grid-column:1 / -1; justify-content:flex-end; }
  .img-field { grid-template-columns:1fr; }
  .img-prev.wide, .img-prev.land { width:100%; }
  .gal-arr { width:38px; height:38px; }
  .gal-th { width:96px; }
  .gal-yt small { display:none; }
  .stepper li { font-size:.68rem; }
  .img-edit.cover .btn span { display:none; }
  .img-edit.cover .btn { width:36px; padding:0; }
}
@media (prefers-reduced-motion: reduce) {
  .tile-a:hover .thumb, .gal-yt:hover .gal-yt-p { transform:none; }
}

/* Stufen-Pills (docs ADR 0020): wie die bisherigen, dazu Konzept, Alpha und Beta. */
.pill.st-concept, .pill.st-alpha, .pill.st-beta { background:rgba(18,19,29,.78); backdrop-filter:blur(4px); }
.pill.st-concept { color:#aab3c8; }
.pill.st-alpha { color:#f59b54; }
.pill.st-beta { color:#f1c24a; }
.pill.st-concept::before, .pill.st-alpha::before, .pill.st-beta::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
:root[data-theme="light"] .pill.st-concept { color:#EDF2F4; }