:root {
  --bg: #0d0d10; --fl: #17171c; --fl2: #1f1f26; --linie: #2c2c35; --text: #f2f2f5; --matt: #9a9aa8;
  --akzent: #ff6b2b; --akzent2: #ff8f5c; --gut: #3ccf7a; --warn: #f2b84b; --schlecht: #ff5a5a;
  --r: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--akzent2); text-decoration: none; }
h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.01em; }
h2 { font-size: 19px; margin: 28px 0 12px; }
h3 { font-size: 16px; margin: 0 0 8px; }
.matt { color: var(--matt); }
.klein { font-size: 13px; }

.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: rgba(13,13,16,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; }
.brand img { height: 26px; }
.brand span { font-size: 17px; }
#nav { display: flex; gap: 14px; align-items: center; font-size: 14px; }
main { max-width: 1180px; margin: 0 auto; padding: 22px 20px 80px; }
.laden { color: var(--matt); padding: 40px 0; text-align: center; }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px;
  padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; background: var(--akzent); color: #fff; }
.knopf:hover { background: var(--akzent2); }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
.knopf.zweit { background: var(--fl2); color: var(--text); border: 1px solid var(--linie); }
.knopf.zweit:hover { border-color: var(--matt); }
.knopf.klein { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.knopf.breit { width: 100%; }

input, select, textarea { font: inherit; color: var(--text); background: var(--fl2); border: 1px solid var(--linie);
  border-radius: 10px; padding: 9px 11px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
label { display: block; font-size: 13px; color: var(--matt); margin: 12px 0 5px; }

.karte { background: var(--fl); border: 1px solid var(--linie); border-radius: var(--r); padding: 16px; }
.raster { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.zwei { display: grid; gap: 22px; grid-template-columns: minmax(260px, 360px) 1fr; align-items: start; }
@media (max-width: 820px) { .zwei { grid-template-columns: 1fr; } }

.vorbild { cursor: pointer; padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s; }
.vorbild:hover { border-color: var(--akzent); }
.vorbild video, .vorbild img { width: 100%; aspect-ratio: 9/16; object-fit: cover; background: #000; display: block; max-height: 340px; }
.vorbild .info { padding: 12px 14px; }
.vorbild .titel { font-weight: 650; margin-bottom: 4px; }
.marke { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; margin-right: 6px; }
.marke.geprueft { background: rgba(60,207,122,.15); color: var(--gut); }
.marke.experimentell { background: rgba(242,184,75,.15); color: var(--warn); }
.marke.nicht_unterstuetzt { background: rgba(255,90,90,.15); color: var(--schlecht); }
.marke.bereit, .marke.fertig, .marke.machbar { background: rgba(60,207,122,.15); color: var(--gut); }
.marke.laeuft, .marke.wartet, .marke.anpassbar { background: rgba(242,184,75,.15); color: var(--warn); }
.marke.fehler, .marke.fehlt { background: rgba(255,90,90,.15); color: var(--schlecht); }

.leiste { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.leiste.rechts { justify-content: flex-end; }
.abstand { height: 14px; }

.schritte { display: flex; gap: 6px; margin: 14px 0 18px; flex-wrap: wrap; }
.schritte a { padding: 8px 14px; border-radius: 99px; background: var(--fl); border: 1px solid var(--linie); color: var(--matt); font-weight: 600; font-size: 14px; }
.schritte a.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }

.szene { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--linie); }
.szene:first-child { border-top: 0; }
.nr { width: 30px; height: 30px; border-radius: 50%; background: var(--fl2); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.nr.pflicht { background: var(--akzent); }
.daumen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.daumen img { width: 46px; height: 64px; object-fit: cover; border-radius: 6px; background: #000; }

.ablage { border: 2px dashed var(--linie); border-radius: var(--r); padding: 26px; text-align: center; color: var(--matt); cursor: pointer; transition: border-color .15s, background .15s; }
.ablage.ueber, .ablage:hover { border-color: var(--akzent); background: rgba(255,107,43,.06); }

.material { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.mat { background: var(--fl2); border-radius: 10px; overflow: hidden; position: relative; font-size: 12.5px; }
.mat img { width: 100%; aspect-ratio: 9/14; object-fit: cover; display: block; background: #000; }
.mat .unten { padding: 7px 8px; }
.mat .weg { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.7); border: 0; color: #fff; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; }
.mat .kennung { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.75); color: var(--akzent2); font-weight: 700; padding: 1px 7px; border-radius: 6px; }

.balken { height: 6px; background: var(--fl2); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.balken > div { height: 100%; background: var(--akzent); width: 0; transition: width .2s; }

.player { width: 100%; max-width: 360px; aspect-ratio: 9/16; background: #000; border-radius: var(--r); display: block; }
.hinweis { padding: 12px 14px; border-radius: 10px; background: rgba(255,107,43,.09); border: 1px solid rgba(255,107,43,.35); margin: 12px 0; }
.hinweis.gut { background: rgba(60,207,122,.08); border-color: rgba(60,207,122,.35); }
.hinweis.warn { background: rgba(242,184,75,.08); border-color: rgba(242,184,75,.35); }

.korr { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; margin-top: 8px; }
.korr label { margin: 0 0 4px; }
.optionen { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.option { padding: 14px; border-radius: 12px; border: 1px solid var(--linie); background: var(--fl2); cursor: pointer; }
.option.an { border-color: var(--akzent); background: rgba(255,107,43,.08); }
.option b { display: block; margin-bottom: 4px; }

.anmelden { max-width: 420px; margin: 40px auto; text-align: center; }
.anmelden .knopf { margin-top: 8px; }
.oder { display: flex; align-items: center; gap: 10px; color: var(--matt); margin: 20px 0 6px; font-size: 13px; }
.oder::before, .oder::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

.meldung { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--fl2); border: 1px solid var(--linie);
  padding: 11px 18px; border-radius: 12px; z-index: 50; max-width: 92vw; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.meldung.fehler { border-color: var(--schlecht); }
pre.text { white-space: pre-wrap; background: var(--fl2); padding: 12px; border-radius: 10px; margin: 0; font: inherit; }
ul.liste { margin: 6px 0 0; padding-left: 18px; }