:root{
  --bg:#14161a; --panel:#1d2025; --line:#2c3037; --text:#eceef1; --muted:#9aa1ab;
  --accent:#9be800; --accent-ink:#10140a; --danger:#ff5d5d;
  --gA:#3fcf5b; --gB:#9be800; --gC:#f2d03b; --gD:#f59b3a; --gE:#ee6a3c; --gF:#d6384a;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--accent)}
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.8rem 1.2rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.brand{font:800 1.2rem "Bahnschrift","Arial Narrow",Arial,sans-serif;color:var(--accent);text-decoration:none;letter-spacing:.02em}
nav{display:flex;gap:1rem;align-items:center}
nav a{text-decoration:none}
.who{color:var(--muted)}
main{max-width:1200px;margin:0 auto;padding:1.2rem}
h1{font:800 1.8rem "Bahnschrift","Arial Narrow",Arial,sans-serif;margin:.2rem 0 1rem}
h2{margin:0;font-size:1.1rem}
.flash{padding:.7rem 1rem;border-radius:8px;margin:0 0 1rem;background:#1f3310;border:1px solid #3d6a14;word-break:break-word}
.flash.err{background:#3a1717;border-color:#7a2a2a}
.empty{color:var(--muted)}

input,textarea,select,button{font:inherit;color:inherit}
input:not([type=radio]):not([type=checkbox]):not([type=file]),textarea{
  width:100%;background:#101216;border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem}
input:focus-visible,textarea:focus-visible,button:focus-visible,.gl input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
button{background:var(--accent);color:var(--accent-ink);border:0;border-radius:8px;padding:.55rem 1rem;font-weight:700;cursor:pointer}
button:hover{filter:brightness(1.08)}
button.danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}

.login{max-width:360px;margin:12vh auto 0;display:grid;gap:1rem}
.login label{display:grid;gap:.3rem;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem;align-items:start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;scroll-margin-top:4.5rem}
.pic{background:#0d0e11;aspect-ratio:4/3;display:grid;place-items:center}
.pic img{width:100%;height:100%;object-fit:contain;padding:.6rem}
.noimg{color:var(--muted)}
.body{padding:1rem;display:grid;gap:.8rem}
.head{display:flex;justify-content:space-between;gap:.8rem;align-items:center}
.avg{font:800 1.9rem/1 "Bahnschrift","Arial Narrow",Arial,sans-serif;text-align:center;min-width:3rem}
.avg small{display:block;font:600 .75rem var(--sans,inherit);color:var(--muted);margin-top:.2rem}

.rate{display:grid;gap:.6rem}
.grades{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem}
.gl{cursor:pointer}
.gl input{position:absolute;opacity:0;pointer-events:none}
.gl span{display:block;text-align:center;padding:.5rem 0;border-radius:8px;border:2px solid var(--line);
  font:800 1.1rem "Bahnschrift","Arial Narrow",Arial,sans-serif;color:var(--muted)}
.gl:hover span{border-color:var(--muted)}
.gl input:checked+span{color:#111;border-color:transparent}
.gl.gA input:checked+span,.chip.gA{background:var(--gA)}
.gl.gB input:checked+span,.chip.gB{background:var(--gB)}
.gl.gC input:checked+span,.chip.gC{background:var(--gC)}
.gl.gD input:checked+span,.chip.gD{background:var(--gD)}
.gl.gE input:checked+span,.chip.gE{background:var(--gE)}
.gl.gF input:checked+span,.chip.gF{background:var(--gF)}
.avg.gA{color:var(--gA)}.avg.gB{color:var(--gB)}.avg.gC{color:var(--gC)}
.avg.gD{color:var(--gD)}.avg.gE{color:var(--gE)}.avg.gF{color:var(--gF)}

.ratings{list-style:none;margin:0;padding:.8rem 0 0;border-top:1px solid var(--line);display:grid;gap:.5rem}
.ratings li{display:flex;gap:.6rem;align-items:flex-start}
.chip{flex:none;width:1.7rem;height:1.7rem;border-radius:6px;display:grid;place-items:center;
  font:800 .95rem "Bahnschrift","Arial Narrow",Arial,sans-serif;color:#111}
.txt{overflow-wrap:anywhere}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem;margin-bottom:1.2rem;display:grid;gap:.8rem}
.inline{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.inline input:not([type=checkbox]):not([type=file]){flex:1 1 180px;width:auto}
.check{display:flex;gap:.4rem;align-items:center}
table{width:100%;border-collapse:collapse}
td{padding:.5rem .4rem;border-top:1px solid var(--line);vertical-align:middle}
.thumb{width:64px}.thumb img{width:56px;height:42px;object-fit:contain;background:#0d0e11;border-radius:6px}
textarea{margin-bottom:.6rem}

@media (max-width:600px){main{padding:.8rem}.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){button{transition:filter .15s}}

/* --- Update: Sperre, Moderation, GIF, Admin-Liste --- */
.card.locked .rate{opacity:.4}
.card.locked .pic img{filter:grayscale(.6)}
.lockmsg{margin:0;padding:.45rem .7rem;border-radius:8px;background:#262a31;color:var(--muted);font-size:.9rem}
.rate input:disabled,.rate button:disabled{cursor:not-allowed}
.gl input:disabled+span{cursor:not-allowed}
.gl:hover input:disabled+span{border-color:var(--line)}

.pic{position:relative}
.pic.hasgif{cursor:pointer}
.gifbadge{position:absolute;right:.5rem;bottom:.5rem;padding:.1rem .45rem;border-radius:6px;font-size:.75rem;font-weight:700;
  background:rgba(0,0,0,.7);color:var(--accent);pointer-events:none}
.pic.playing .gifbadge{opacity:.4}

.mod{margin-left:auto;display:flex;gap:.3rem;flex:none}
button.small{padding:.2rem .55rem;font-size:.8rem}
button.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.ratings li{align-items:center}

.hint{margin:0;color:var(--muted)}

.state{padding:.1rem .6rem;border-radius:999px;font-size:.8rem;font-weight:700}
.state.on{background:#1f3310;color:var(--accent)}
.state.off{background:#2e3138;color:var(--muted)}

/* --- Noten untereinander --- */
.grades{grid-template-columns:1fr;gap:.35rem}
.gl span{text-align:left;padding:.5rem .8rem;font:700 1rem "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}

/* --- Admin: Kacheln --- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1rem;align-items:start}
.tile{background:#181b20;border:1px solid var(--line);border-radius:12px;padding:1rem;display:grid;gap:1rem}
.tile-head{display:flex;gap:.8rem;align-items:center}
.tile-head .thumb{width:72px;flex:none}
.tile-head .thumb img{width:72px;height:54px;object-fit:contain;background:#0d0e11;border-radius:8px}
.tile-head .thumb:empty{height:54px;background:#0d0e11;border-radius:8px}
.tile-title{display:grid;gap:.3rem;justify-items:start;min-width:0}
.tile-title h3{margin:0;font-size:1.05rem;overflow-wrap:anywhere}
.field{display:grid;gap:.4rem;padding-top:.8rem;border-top:1px solid var(--line)}
.field .lbl{min-width:0;font-weight:600;color:var(--text);font-size:.9rem}
.up{display:grid;gap:.4rem}
input[type=file]{width:100%;font-size:.85rem;color:var(--muted)}
input[type=file]::file-selector-button{margin-right:.6rem;padding:.4rem .7rem;border-radius:8px;border:1px solid var(--line);
  background:#101216;color:var(--text);font:inherit;cursor:pointer}
button.wide{width:100%}
.tile-foot{padding-top:.8rem;border-top:1px solid var(--line)}

/* --- Admin: Noten beschriften --- */
.labels{display:grid;gap:.6rem;max-width:520px}
.labelrow{display:flex;gap:.6rem;align-items:center}
.labelrow .chip{width:2rem;height:2rem}
.labelrow .dash{color:var(--muted)}
.labelrow input{flex:1}