/* Molzhain Gelaendewerkstatt - weltsein-Designsystem, auf ein Vollbildwerkzeug uebertragen */

@font-face { font-family:'JetBrains Mono'; src:url('fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('fonts/JetBrainsMono-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  --brand:#4a7a3f; --brand-light:#5a8f4e;
  --bg:#faf9f7; --bg-secondary:#f0eee9;
  --text:#3d4a3f; --text-muted:#7a8b7e;
  --border:#d8d4cc; --danger:#cc3333;
  --panel:rgba(250,249,247,.94);
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code','Courier New',monospace;
}
html.dark {
  --brand:#8fa37a; --brand-light:#a0b48c;
  --bg:#1a1b17; --bg-secondary:#242421;
  --text:#c8d4ca; --text-muted:#7a8b7e;
  --border:#3a3a36; --danger:#e06666;
  --panel:rgba(26,27,23,.94);
}

* { box-sizing:border-box; }
html,body { margin:0; height:100%; overflow:hidden; }
body {
  font-family:var(--font-body); font-size:15px; color:var(--text);
  background:var(--bg); -webkit-font-smoothing:antialiased;
}
canvas { display:block; }
#buehne { position:fixed; inset:0; }

/* ---------------------------------------------------------------- Kopf */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:20;
  background:var(--panel); border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px);
}
.site-header .inner {
  display:flex; align-items:center; gap:1rem;
  padding:.5rem .9rem; min-height:44px;
}
.site-title {
  font-family:var(--font-mono); font-weight:700; font-size:.9rem;
  color:var(--text); text-decoration:none; letter-spacing:-.02em; white-space:nowrap;
}
.site-title span { color:var(--text-muted); font-weight:400; }
.site-nav { display:flex; gap:.25rem; margin-left:.5rem; }
.header-controls { margin-left:auto; display:flex; gap:.35rem; align-items:center; }

/* ---------------------------------------------------------------- Knoepfe */
.btn {
  font-family:var(--font-mono); font-size:.72rem; line-height:1;
  padding:.55rem .7rem; min-height:32px;
  background:transparent; color:var(--text);
  border:1px solid var(--border); border-radius:4px;
  cursor:pointer; white-space:nowrap;
  transition:border-color .12s, color .12s, background .12s;
}
.btn:hover { border-color:var(--brand); color:var(--brand); }
a.btn { text-decoration:none; display:inline-flex; align-items:center; }
.btn[aria-pressed="true"], .btn.aktiv {
  border-color:var(--brand); color:var(--bg); background:var(--brand);
}
.btn-danger:hover { border-color:var(--danger); color:var(--danger); }
.btn-sm { padding:.35rem .5rem; min-height:26px; font-size:.66rem; }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.theme-toggle { width:32px; padding:0; font-size:.9rem; }

/* ---------------------------------------------------------------- Tafel */
.tafel {
  position:fixed; top:52px; right:0; bottom:0; width:310px; z-index:15;
  background:var(--panel); border-left:1px solid var(--border);
  backdrop-filter:blur(8px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:.9rem .9rem 3rem;
}
.tafel.aus { display:none; }
.tafel h2 {
  font-family:var(--font-mono); font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted);
  margin:1.4rem 0 .6rem; padding-bottom:.35rem;
  border-bottom:1px solid var(--border);
}
.tafel h2:first-child { margin-top:0; }
.tafel p { font-size:.8rem; line-height:1.5; color:var(--text-muted); margin:.4rem 0; }

.gruppe { display:flex; gap:.3rem; flex-wrap:wrap; margin:.5rem 0; }
.gruppe .btn { flex:1 1 auto; }

.feld { display:flex; align-items:center; gap:.5rem; margin:.4rem 0; }
.feld label {
  font-family:var(--font-mono); font-size:.68rem; color:var(--text-muted);
  flex:0 0 5.6rem;
}
.feld input[type=number], .feld input[type=text], .feld select {
  flex:1 1 auto; width:100%; min-width:0;
  font-family:var(--font-mono); font-size:.75rem;
  padding:.35rem .4rem; color:var(--text);
  background:var(--bg-secondary); border:1px solid var(--border); border-radius:4px;
}
.feld input:focus, .feld select:focus { outline:none; border-color:var(--brand); }
.feld input[type=range] { flex:1 1 auto; accent-color:var(--brand); }
.feld input[type=color] {
  flex:0 0 46px; height:28px; padding:2px; cursor:pointer;
  background:var(--bg-secondary); border:1px solid var(--border); border-radius:4px;
}
.feld .wert {
  font-family:var(--font-mono); font-size:.7rem; color:var(--text);
  flex:0 0 3.4rem; text-align:right;
}
.feld.check { justify-content:flex-start; }
.feld.check label { flex:1 1 auto; color:var(--text); }
.feld.check input { accent-color:var(--brand); width:16px; height:16px; }

/* ---------------------------------------------------------------- Bilanz */
.bilanz { font-family:var(--font-mono); font-size:.75rem; margin:.5rem 0; }
.bilanz .zeile {
  display:flex; justify-content:space-between; padding:.28rem 0;
  border-bottom:1px solid var(--border);
}
.bilanz .zeile:last-child { border-bottom:none; font-weight:700; }
.bilanz .zahl { font-variant-numeric:tabular-nums; }
.auf { color:var(--brand); }
.ab  { color:var(--danger); }

/* ---------------------------------------------------------------- Liste */
.liste { margin:.4rem 0; }
.liste-eintrag {
  display:flex; align-items:center; gap:.5rem; padding:.4rem 0;
  border-bottom:1px solid var(--border);
  font-family:var(--font-mono); font-size:.72rem; cursor:pointer;
}
.liste-eintrag:hover { color:var(--brand); }
.liste-eintrag.gewaehlt { color:var(--brand); font-weight:700; }
.liste-eintrag .farbe {
  width:10px; height:10px; border-radius:2px; flex:0 0 auto;
  border:1px solid var(--border);
}
.liste-eintrag a { color:var(--brand); text-decoration:none; }
.liste-eintrag a:hover { text-decoration:underline; }
.liste-eintrag .weg { margin-left:auto; color:var(--text-muted); }
.liste-eintrag .weg:hover { color:var(--danger); }
.leer { font-size:.75rem; color:var(--text-muted); font-style:italic; padding:.4rem 0; }

/* ---------------------------------------------------------------- Fuss */
.statusleiste {
  position:fixed; left:0; bottom:0; z-index:15;
  display:flex; gap:.9rem; align-items:center;
  padding:.4rem .8rem;
  background:var(--panel); border-top:1px solid var(--border);
  border-right:1px solid var(--border); border-top-right-radius:4px;
  font-family:var(--font-mono); font-size:.68rem; color:var(--text-muted);
  backdrop-filter:blur(8px);
}
.statusleiste b { color:var(--text); font-weight:400; font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------- Hinweise */
.hinweis {
  position:fixed; left:50%; top:64px; transform:translateX(-50%); z-index:30;
  background:var(--panel); border:1px solid var(--border); border-radius:4px;
  padding:.5rem .8rem; font-family:var(--font-mono); font-size:.72rem;
  color:var(--text); backdrop-filter:blur(8px);
  opacity:0; transition:opacity .25s; pointer-events:none;
}
.hinweis.zeig { opacity:1; }

#ladeschirm {
  position:fixed; inset:0; z-index:50; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:.8rem;
  background:var(--bg); color:var(--text-muted);
  font-family:var(--font-mono); font-size:.8rem;
}
#ladeschirm .balken { width:220px; height:2px; background:var(--border); }
#ladeschirm .balken i { display:block; height:100%; width:0; background:var(--brand); transition:width .2s; }
#ladeschirm.weg { display:none; }

#fadenkreuz {
  position:fixed; left:50%; top:50%; width:14px; height:14px; z-index:14;
  transform:translate(-50%,-50%); pointer-events:none; display:none;
}
#fadenkreuz::before, #fadenkreuz::after {
  content:''; position:absolute; background:var(--text); opacity:.6;
}
#fadenkreuz::before { left:50%; top:0; width:1px; height:100%; }
#fadenkreuz::after { top:50%; left:0; height:1px; width:100%; }
body.begehen #fadenkreuz { display:block; }

.quelle {
  margin-top:1.6rem; padding-top:.6rem; border-top:1px solid var(--border);
  font-size:.68rem; line-height:1.5; color:var(--text-muted);
}
.quelle a { color:var(--brand); }

@media (max-width:760px) {
  .tafel { width:100%; top:auto; height:52vh; border-left:none; border-top:1px solid var(--border); }
  .site-nav { display:none; }
}