:root{
  --ring-lg: clamp(180px, 26vw, 360px);
  --ring-md: clamp(150px, 22vw, 300px);
  --ring-sm: clamp(120px, 18vw, 240px);
  --arm: clamp(180px, 18vw, 300px);
  --glove: clamp(160px, 17vw, 260px);
  --scarf: clamp(260px, 24vw, 360px);
  --hat: clamp(200px, 20vw, 320px);
  --carrot: clamp(50px, 4.5vw, 90px);
  --coal: clamp(26px, 2.3vw, 36px);

  --tree: clamp(360px, 42vw, 700px);
  --star: clamp(120px, 14vw, 260px);
  --ornament: clamp(60px, 8vw, 140px);
  --candle: clamp(60px, 8vw, 140px);
  --gift: clamp(140px, 14vw, 260px);
}
* { box-sizing: border-box; }
html, body { height:100%; }
body { margin:0; background:#fff; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.topbar{
  position:fixed; left:0; top:0; right:0; height:56px;
  background:#f7f7f9; border-bottom:1px solid #e5e5ef;
  display:flex; align-items:center; gap:12px; padding:0 12px; z-index:1000;
}
.brand{ font-weight:700; }
.menu{ display:flex; gap:8px; }
.tab{
  border:1px solid #d0d0da; background:#fff; padding:8px 12px; border-radius:8px; cursor:pointer;
}
.tab.active{ background:#e6f0ff; border-color:#a6c4ff; }

.export{
  margin-left:auto; padding:8px 12px; border:1px solid #333; background:#fff; border-radius:8px; cursor:pointer;
}

#app {
  position:relative; width:100%; height:100%;
  padding-top:56px; /* Platz für die Topbar */
  overflow:hidden;
}

.item { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(0deg); transform-origin:center center; touch-action:none; cursor: default; z-index:0; }
.item.selected { z-index: 10; }
.item.dragging { cursor: default; }
.item img { display:block; width:100%; height:auto; pointer-events:none; user-select:none; }

.controls { position:absolute; inset:0; pointer-events:none; }
.knob { position:absolute; width:18px; height:18px; border:2px solid #333; background:#fff; border-radius:999px; display:none; pointer-events:auto; right:6px; bottom:6px; box-shadow:0 0 0 1px rgba(0,0,0,.08); cursor: pointer; }
.item.selected .knob { display:block; }

/* Schneemann Startgrößen */
.kreis1 { width: var(--ring-lg); }
.kreis2 { width: var(--ring-md); }
.kreis3 { width: var(--ring-sm); }
.stock1, .stock2 { width: var(--arm); }
.handschuh1, .handschuh2 { width: var(--glove); }
.schal { width: var(--scarf); }
.weihnachten { width: var(--hat); }
.moehre { width: var(--carrot); }
.kohleauge, .kohlemund { width: var(--coal); }

/* Christbaum Startgrößen */
.baum_oben {
  width: clamp(160px, 18vw, 260px);
}
.baum_mitte {
  width: clamp(220px, 24vw, 340px);
}
.baum_unten {
  width: clamp(300px, 30vw, 420px);
}
.baum_stamm {
  width: clamp(60px, 7vw, 100px);
}

.kugel {
  width: clamp(40px, 5vw, 70px);
}
.kerze {
  width: clamp(30px, 4vw, 60px);
}
.geschenk {
  width: clamp(80px, 10vw, 140px);
}
.strohstern {
  width: clamp(70px, 8vw, 130px);
}

.stockings {
  width: clamp(70px, 9vw, 140px);
}

.gingerbread {
  width: clamp(80px, 10vw, 160px);
}

.bell {
  width: clamp(60px, 8vw, 120px);
}

.candy {
  width: clamp(70px, 9vw, 140px);
}

/* Export: Griffe verstecken */
.exporting .controls{ display:none !important; }