/* ===================== Basis (global) ===================== */
:root{
  --bg:#0b0f14;
  --ink:#e8eef7;
  --line:#2a3444;
  --panel:#0e1520;
  --panel-2:#0b1220;
  --accent:#1f6feb;
  --danger:#c1121f;
  --muted:#9fb3c8;
  --topbar-h:56px;
  --content-pad-t:6px;        /* nach Wunsch 0–12px */
}

*{ box-sizing:border-box; }

/* Layout-Grundgerüst */
html,body{ height:100%; overscroll-behavior:none; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  position:fixed; width:100%;
}

/* iPad/Board: Scroll beim Zeichnen sperren */
html.noscroll, body.noscroll { overflow:hidden; }

/* Topbar */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:10;
  height:var(--topbar-h);
  display:flex; gap:10px; align-items:center;
  background:var(--bg); padding:10px; border-bottom:1px solid #17202a;
}

/* Tabs */
.tabs{ display:flex; gap:10px; }
.tabs .tab{
  display:inline-block; text-decoration:none; cursor:pointer;
  background:#0f1620; color:var(--ink);
  border:1px solid #243247; border-radius:8px; padding:6px 10px;
}
.tabs .tab.active{ background:#141c27; }

/* Main-Viewport */
main{
  position:fixed;
  top:var(--topbar-h); left:0; right:0;
  bottom:env(safe-area-inset-bottom,0);
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding: var(--content-pad-t) 16px 16px !important;
}

/* Views */
.view { display:none; padding:0; height:auto; overflow:visible; }
.view.active { display:block; }
.view.active > *:first-child { margin-top:0 !important; }

/* Karten/Utilities */
.card{
  border:1px solid #17202a; border-radius:12px;
  background:var(--panel); padding:12px;
}
.row{ display:flex; gap:8px; align-items:center; }
.label{ opacity:.9; }

/* Join-Route: Topbar ausblenden */
body.route-join .topbar { display:none; }
body.route-join main { padding-top:0; }

/* ===================== Mandala spezifisch ===================== */
.mandala-layout{
  display:grid; grid-template-columns:320px 1fr; gap:16px;
  align-items:stretch; height:100%;
}
.mandala-layout > *{ min-width:0; }

.tools{
  position:sticky; top:32px;
  max-height:calc(100vh - 88px);
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.mandala-subnav{ display:flex; gap:8px; margin:8px 0 0; flex-wrap:wrap; }
.mandala-subnav .subtab{
  background:#0f1620; color:#e8eef7;
  border:1px solid #243247; border-radius:8px;
  padding:6px 10px; cursor:pointer; text-decoration:none;
}
.mandala-subnav .subtab.active{ background:#141c27; }

/* Bühne – nicht clippen, mit iOS Safe-Area unten Luft */
#mandalas .stage{
  position:relative;
  overflow:auto;
  border:1px solid #17202a; border-radius:12px; background:#0a0f14;
  padding:12px 12px calc(28px + env(safe-area-inset-bottom,0px)) 12px;
  min-height:min(76vh,1100px);
  -webkit-overflow-scrolling:touch;
}
#mandalas .stage::after{
  content:""; display:block;
  height:calc(24px + env(safe-area-inset-bottom,0px));
}

/* Host */
#mandalaHost{ position:relative; z-index:0; width:100%; height:100%; }
#mandalaHost svg{
  display:block;
  width:100%;
  height:auto;              /* wichtig fürs Einpassen */
  overflow:visible;         /* Inhalte dürfen überstehen (keine abgeschnittenen Ränder) */
  touch-action:none; -webkit-user-select:none; user-select:none;
}
#mandalaHost svg *{ vector-effect:non-scaling-stroke; }

/* Overlay (Freihand) – absolut drüber, Größe = Bühne */
#mandalaDraw{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  touch-action:none; -webkit-user-select:none; user-select:none;
  /* pointer-events wird per JS dynamisch zwischen auto/none geschaltet */
}
/* Zoom-UI (unten rechts, schwebend) */
#mandalas .zoom-ctl{
  position:absolute; right:12px; bottom:12px; z-index:5;
  display:flex; gap:6px; align-items:center;
  background:#0f1620cc; backdrop-filter: blur(4px);
  border:1px solid #243247; border-radius:10px; padding:6px;
}
#mandalas .zoom-ctl button{
  appearance:none; border:1px solid #2a3a52; border-radius:8px;
  background:#141c27; color:#e8eef7; cursor:pointer;
  width:34px; height:32px; line-height:32px; text-align:center;
  font:600 16px/1 system-ui;
}
#mandalas .zoom-ctl button:hover{ background:#182332; }
#mandalas .zoom-ctl .level{
  min-width:54px; text-align:center; font:600 12px/1 system-ui;
  color:#9fb3c8; padding:0 6px;
}

/* Zoom-Wrapper (wird von JS angelegt) */
#mandalas .zoom-wrap{
  position:relative; transform-origin: 0 0;
  /* Breite/Höhe setzt JS, damit die Bühne scrollbar wird */
}
/* Palette */
.palette{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; }
.swatch{ width:28px; height:28px; border-radius:50%; border:1px solid #0005; cursor:pointer; }

.hidden{ display:none !important; }

/* ===================== Home-Tab mit Elefant ===================== */
#home .card {
  display:flex; justify-content:center; align-items:center;
  min-height:80vh;
}
#home .card img {
  max-width:90%; max-height:70vh;
  height:auto; width:auto; object-fit:contain;
}

/* ===================== About-Tab ===================== */
#about .about-wrap { display:flex; height:100%; gap:1rem; }
#about .about-sidebar { width:280px; max-width:36vw; border-right:1px solid #ddd; padding:1rem; }
#about .about-main { flex:1; display:flex; flex-direction:column; min-width:0; padding-bottom:2rem; }
#about .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Courier New",monospace; }

/* Lizenzanzeige */
#about .license-wrap{
  height:40vh; max-height:calc(100vh - 260px);
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  margin-bottom:1rem; border:1px solid #3a3a3a; border-radius:.5rem; background:#1e1e1e;
}
#about pre.license-box{
  margin:0; padding:1rem; background:transparent; color:#e6e6e6;
  white-space:pre-wrap; font-size:.95rem; line-height:1.5;
}
@media (prefers-color-scheme: light){
  #about .license-wrap { background:#f8f9fa; border-color:#e5e7eb; }
  #about pre.license-box { color:#212529; }
}

/* Responsive About */
@media (max-width:900px){
  #about .about-wrap { flex-direction:column; }
  #about .about-sidebar { width:auto; max-width:none; border-right:0; border-bottom:1px solid #ddd; }
}

/* Puzzle-Tab Korrekturen (wie zuvor) */
#puzzle .puz-top{ margin-top:0 !important; }
#puzzle .puz-wrap{ margin-top:0 !important; }

#mandalas .zoom-ctl{ position:absolute; right:12px; bottom:12px; z-index:5; display:flex; gap:6px; align-items:center; background:#0f1620cc; backdrop-filter:blur(4px); border:1px solid #243247; border-radius:10px; padding:6px; }
#mandalas .zoom-ctl button{ appearance:none; border:1px solid #2a3a52; border-radius:8px; background:#141c27; color:#e8eef7; cursor:pointer; width:34px; height:32px; line-height:32px; text-align:center; font:600 16px/1 system-ui; }
#mandalas .zoom-ctl .level{ min-width:54px; text-align:center; font:600 12px/1 system-ui; color:#9fb3c8; padding:0 6px; }
#mandalas .zoom-wrap{ position:relative; transform-origin:0 0; }

/* Layout */
.voc-layout{
  display:grid;
  grid-template-columns: 280px minmax(0,1fr);
  gap:16px;
}
@media (max-width: 980px){
  .voc-layout{ grid-template-columns: 1fr; }
}

/* Sidebar */
.voc-sidebar{
  align-self:start;
  position:sticky;
  top:72px;              /* Höhe deiner Topbar */
}
.voc-side-title{
  margin:0 0 8px;
  font-size:1rem;
  opacity:.8;
}
.voc-controls{
  background:#0f1620;
  border:1px solid #243247;
  border-radius:12px;
  padding:12px;
}
.voc-controls .label{
  display:block; margin:12px 0 4px; font-size:.9rem; opacity:.8;
}
.voc-controls .btn-block{ width:100%; }
.voc-controls .form-select{ width:100%; }

/* QR Box */
.qr-box{ margin-top:10px; display:grid; gap:6px; place-items:center; }
.qr-box canvas{ background:#fff; border-radius:8px; }

/* rechte Seite */
.voc-main.card{ padding:16px; }

/* Modal bleibt wie gehabt */
.voc-modal{ position:fixed; inset:0; z-index:9999; display:none; place-items:center; background:rgba(0,0,0,.6); pointer-events:none }
.voc-modal:not([hidden]){ display:grid; }
.voc-modal .sheet{ pointer-events:auto; }
.voc-modal-inner{ background:#0f1620; color:#e8eef7; border:1px solid #243247; border-radius:14px; padding:16px; width:min(960px,96vw) }
.voc-cam-wrap{ position:relative; aspect-ratio:4/3; background:#111; border:1px solid #243247; border-radius:12px; overflow:hidden }
#voc-video{ width:100%; height:100%; object-fit:contain; background:#000 }
.voc-progress{ position:relative; height:14px; background:#1b2838; border-radius:999px; overflow:hidden; margin-top:12px }
.voc-progress .bar{ height:100%; width:0; background:#2dd4bf; transition:width .2s }
.voc-progress .label{ position:absolute; inset:0; display:grid; place-items:center; font-size:11px; color:#021b1a }