/* Wichteljagd-Manager — klare, warme Verwaltungs-Oberflaeche */
:root {
  --hintergrund: #faf9f7;
  --karte: #ffffff;
  --rahmen: #e7e4df;
  --text: #2c2a26;
  --text-schwach: #7a756c;
  --akzent: #0f766e;
  --akzent-dunkel: #115e59;
  --akzent-hell: #ccfbf1;
  --warnung: #b45309;
  --fehler: #b91c1c;
  --fehler-hell: #fee2e2;
  --ok: #15803d;
  --ok-hell: #dcfce7;
  --schatten: 0 1px 3px rgba(44, 42, 38, .08), 0 4px 14px rgba(44, 42, 38, .06);
  --radius: 12px;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--hintergrund);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* ── Kopf ── */
.kopf {
  background: var(--karte);
  border-bottom: 1px solid var(--rahmen);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 58px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.kopf .logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px; white-space: nowrap;
}
.kopf .logo .punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); }
.kopf nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.kopf nav button {
  border: 0; background: transparent; padding: 8px 14px; border-radius: 8px;
  font-size: 14px; color: var(--text-schwach); cursor: pointer; white-space: nowrap;
}
.kopf nav button:hover { background: #f3f1ed; color: var(--text); }
.kopf nav button.aktiv { background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 600; }
.kopf .rechts { display: flex; align-items: center; gap: 10px; }

/* ── Layout ── */
.seite { max-width: 1080px; margin: 24px auto; padding: 0 20px 60px; }
.karte {
  background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 20px; margin-bottom: 18px;
}
.karte h2 { margin: 0 0 4px; font-size: 17px; }
.karte .hinweis { color: var(--text-schwach); font-size: 13px; margin: 0 0 14px; }
.zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.abstand { height: 12px; }

/* ── Buttons / Inputs ── */
.btn {
  border: 1px solid var(--rahmen); background: var(--karte); color: var(--text);
  padding: 8px 16px; border-radius: 9px; font-size: 14px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: #f5f3f0; }
.btn.primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
.btn.primaer:hover { background: var(--akzent-dunkel); }
.btn.gefahr { color: var(--fehler); }
.btn.gefahr:hover { background: var(--fehler-hell); border-color: var(--fehler); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.klein { padding: 5px 10px; font-size: 13px; }

input[type=text], input[type=password], textarea {
  width: 100%; border: 1px solid var(--rahmen); border-radius: 9px;
  padding: 9px 12px; font-size: 14px; font-family: inherit; background: #fff; color: var(--text);
}
input:focus, textarea:focus { outline: 2px solid var(--akzent-hell); border-color: var(--akzent); }
textarea.mono { font-family: var(--mono); font-size: 13px; line-height: 1.45; }
label.feld { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px; }

/* ── Login / Setup ── */
.anmeldung { max-width: 380px; margin: 10vh auto; }
.anmeldung h1 { font-size: 20px; margin: 0 0 4px; }

/* ── Upload ── */
.dropzone {
  border: 2px dashed var(--rahmen); border-radius: var(--radius);
  padding: 34px 20px; text-align: center; color: var(--text-schwach);
  transition: border-color .15s, background .15s; cursor: pointer;
}
.dropzone.ueber, .dropzone:hover { border-color: var(--akzent); background: #f0fdfa; color: var(--akzent-dunkel); }
.fortschritt { height: 8px; background: #f0eee9; border-radius: 99px; overflow: hidden; margin-top: 12px; }
.fortschritt > div { height: 100%; background: var(--akzent); width: 0; transition: width .15s; }

/* ── Versionsliste ── */
.version {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border: 1px solid var(--rahmen); border-radius: 10px; margin-bottom: 10px; background: #fff;
}
.version.aktiv { border-color: var(--akzent); background: #fbfefc; }
.version .info { flex: 1; min-width: 0; }
.version .info .titel { font-weight: 600; }
.version .info .meta { font-size: 12.5px; color: var(--text-schwach); font-family: var(--mono); }
.pille {
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px;
  background: #f0eee9; color: var(--text-schwach); white-space: nowrap;
}
.pille.aktiv { background: var(--ok-hell); color: var(--ok); }

/* ── Meldungen ── */
.meldung { padding: 11px 14px; border-radius: 9px; font-size: 14px; margin: 12px 0; display: none; }
.meldung.sichtbar { display: block; }
.meldung.ok { background: var(--ok-hell); color: var(--ok); }
.meldung.fehler { background: var(--fehler-hell); color: var(--fehler); }

/* ── Inhalte ── */
.szenen-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.szene {
  border: 1px solid var(--rahmen); border-radius: 10px; padding: 12px 14px; background: #fff;
}
.szene .szene-kopf { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.szene .szene-kopf .nr { font-family: var(--mono); font-size: 12px; color: var(--text-schwach); }
.szene input.titel { font-weight: 600; }
.szene textarea { min-height: 74px; resize: vertical; }
.historie-eintrag { display: flex; gap: 12px; font-size: 13px; padding: 7px 2px; border-bottom: 1px dashed var(--rahmen); }
.historie-eintrag .v { font-family: var(--mono); font-weight: 700; color: var(--akzent-dunkel); min-width: 42px; }

/* ── Live ── */
.live-rahmen { width: 100%; height: 66vh; border: 1px solid var(--rahmen); border-radius: 10px; background: #fff; }

/* ── Audit ── */
.audit-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.audit-tabelle th, .audit-tabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rahmen); vertical-align: top; }
.audit-tabelle th { color: var(--text-schwach); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.audit-tabelle td.mono { font-family: var(--mono); font-size: 12px; }

.verborgen { display: none !important; }
.rechtsbuendig { margin-left: auto; }
.grau { color: var(--text-schwach); }
.mono { font-family: var(--mono); }

@media (max-width: 720px) {
  .kopf { padding: 0 12px; gap: 8px; }
  .seite { padding: 0 12px 40px; }
  .version { flex-wrap: wrap; }
}

/* ── Live-Editor ── */
.pille.warnung { background: #fef3c7; color: var(--warnung); }

.editor-werkzeugleiste, .editor-szenenleiste {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px;
}
.editor-szenenleiste { margin-bottom: 14px; }
.editor-szenenleiste label { font-size: 13px; font-weight: 600; color: var(--text-schwach); }
.editor-szenenleiste select {
  border: 1px solid var(--rahmen); border-radius: 8px; padding: 6px 10px;
  font-size: 14px; background: #fff; color: var(--text); min-width: 220px;
}
.ed-trenner { width: 1px; height: 22px; background: var(--rahmen); margin: 0 4px; }

.editor-wrap { display: flex; gap: 16px; align-items: flex-start; }
.editor-buehne-rahmen {
  flex: 1; min-width: 0; position: relative; overflow: hidden;
  border: 1px solid var(--rahmen); border-radius: 10px; background: #0b1713;
}
#ed-buehne { position: relative; transform-origin: top left; overflow: hidden; }
.ed-leer {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55); font-size: 32px;
}

.ed-el { position: absolute; user-select: none; touch-action: none; }
.ed-el.ed-text { cursor: grab; overflow: hidden; padding: 4px; line-height: 1.25; white-space: pre-wrap; word-break: break-word; }
.ed-el.ed-bild, .ed-el.ed-box { cursor: grab; }
.ed-el.ed-bild img { width: 100%; height: 100%; display: block; pointer-events: none; }
.ed-el.gewaehlt { outline: 3px solid var(--akzent); outline-offset: 0; }
.ed-platzhalter {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border: 3px dashed rgba(255,255,255,.4); color: rgba(255,255,255,.6); font-size: 24px;
}

.ed-griff {
  position: absolute; width: 22px; height: 22px; background: var(--akzent);
  border: 2px solid #fff; border-radius: 6px; z-index: 5;
}
.ed-griff-nw { left: -11px; top: -11px; cursor: nwse-resize; }
.ed-griff-no { right: -11px; top: -11px; cursor: nesw-resize; }
.ed-griff-sw { left: -11px; bottom: -11px; cursor: nesw-resize; }
.ed-griff-so { right: -11px; bottom: -11px; cursor: nwse-resize; }

.editor-seitenleiste {
  width: 270px; flex-shrink: 0; background: #fbfaf8; border: 1px solid var(--rahmen);
  border-radius: 10px; padding: 14px; max-height: 640px; overflow-y: auto;
}
.ed-ueberschrift { margin: 0 0 10px; font-size: 14px; color: var(--akzent-dunkel); }
.ed-feld { margin-bottom: 10px; }
.ed-feld label { display: block; font-size: 12px; font-weight: 600; color: var(--text-schwach); margin-bottom: 3px; }
.ed-feld input[type=number], .ed-feld input[type=text], .ed-feld select, .ed-feld textarea {
  width: 100%; border: 1px solid var(--rahmen); border-radius: 7px; padding: 6px 9px; font-size: 13px;
  background: #fff; color: var(--text); font-family: inherit;
}
.ed-feld input[type=color] { width: 100%; height: 34px; border: 1px solid var(--rahmen); border-radius: 7px; background: #fff; padding: 2px; }
.ed-feld input[type=range] { width: 100%; }
.ed-feld input[type=checkbox] { width: auto; transform: scale(1.3); }
.ed-bildvorschau {
  width: 100%; height: 110px; border: 1px solid var(--rahmen); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #f0eee9; margin-bottom: 8px;
}
.ed-bildvorschau img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ── Asset-Dialog ── */
.dialog-hintergrund {
  position: fixed; inset: 0; background: rgba(30, 27, 22, .45);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.dialog {
  background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
  padding: 22px; width: min(720px, 92vw); max-height: 84vh; overflow-y: auto;
}
.dialog h3 { margin: 0 0 12px; font-size: 16px; }
.asset-gitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px; min-height: 80px;
}
.asset-kachel {
  position: relative; border: 1px solid var(--rahmen); border-radius: 9px; overflow: hidden;
  background: #f8f6f3; aspect-ratio: 1; cursor: pointer;
}
.asset-kachel:hover { border-color: var(--akzent); }
.asset-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-name {
  position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.92);
  font-size: 10.5px; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asset-entf {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 6px;
  border: 0; background: rgba(185,28,28,.9); color: #fff; font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 900px) {
  .editor-wrap { flex-direction: column; }
  .editor-seitenleiste { width: 100%; max-height: none; }
}