.hive-page{padding-bottom:48px}
.hive-page-head{margin-bottom:18px}
.hive-card{padding:clamp(12px,1.5vw,22px)}
.hive-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.hive-toolbar .button:nth-child(2){min-width:78px}
.hive-viewport{width:100%;max-height:calc(100vh - 250px);min-height:420px;overflow:auto;border:1px solid var(--line);background:#06090b;overscroll-behavior:contain}
.hive-canvas{position:relative;display:inline-block;width:max-content;min-width:0;line-height:0;vertical-align:top}
.hive-canvas img{display:block;width:calc(900px * var(--hive-zoom,1));max-width:none;height:auto;user-select:none;-webkit-user-drag:none;transform-origin:top left}
@media(min-width:1000px){.hive-canvas img{width:calc(min(100vw - 90px,1400px) * var(--hive-zoom,1))}}
@media(max-width:700px){.hive-page{width:calc(100% - 12px)}.hive-viewport{min-height:360px;max-height:72vh}.hive-toolbar .button:last-child{width:100%;text-align:center}}

.hive-markers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hive-marker{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;border:2px solid #fff;font-weight:900;pointer-events:auto;box-shadow:0 2px 8px #000;background:#b80d16;color:#fff}.hive-marker.ok{background:#2b9b5d}.hive-marker.wrong{background:#c8232c}.hive-marker.active{animation:hivePulse .7s ease-in-out 3;z-index:20}@keyframes hivePulse{50%{transform:translate(-50%,-50%) scale(1.8);box-shadow:0 0 0 12px rgba(245,185,66,.3)}}.hive-ok{color:var(--success)}.hive-warning{color:var(--accent-bright)}

/* v5.5.1 – browsergestützte Hiveplan-Bilderkennung */
.hive-import-page{padding-bottom:48px}.hive-ocr-panel{margin-bottom:18px}.hive-ocr-upload-row{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:14px;align-items:end}.hive-ocr-panel progress{width:100%;height:12px;margin:8px 0 18px;accent-color:var(--accent)}.hive-ocr-table input{width:100%;min-width:110px;margin:0}.hive-ocr-table td:first-child input{min-width:210px}.hive-csv-panel{margin-top:18px}.hive-csv-panel summary{cursor:pointer;font-family:"Rajdhani",sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.hive-csv-form{margin-top:18px}@media(max-width:700px){.hive-ocr-upload-row{grid-template-columns:1fr}.hive-ocr-upload-row .button{width:100%}}


/* v5.5.3 – Marker bleiben bei jeder Zoomstufe exakt auf der Bildfläche. */
.hive-viewport{text-align:left}
.hive-canvas img{position:relative;z-index:1}
.hive-markers{z-index:2}


/* v5.5.6: dauerhaft erreichbare horizontale Hive-Navigation */
.hive-horizontal-scroll{
  position:sticky;
  top:var(--krys-sticky-offset,0px);
  z-index:8;
  width:100%;
  height:18px;
  margin:0 0 8px;
  overflow-x:auto;
  overflow-y:hidden;
  border:1px solid var(--line);
  background:#080b0d;
  scrollbar-gutter:stable;
  overscroll-behavior-x:contain;
}
.hive-horizontal-scroll-inner{height:1px;min-width:100%}
.hive-viewport{overflow-x:auto;overflow-y:auto}
@media(max-width:700px){.hive-horizontal-scroll{top:0}}


/* v5.6.0 – Hiveplan direkt aus Grid-Planner-JSON */
.hive-json-panel{margin-bottom:18px}
.hive-grid-canvas{
  --hive-cell:32px;
  position:relative;
  width:calc(var(--grid-width) * var(--hive-cell) * var(--hive-zoom,1));
  height:calc(var(--grid-height) * var(--hive-cell) * var(--hive-zoom,1));
  min-width:1px;
  background-color:#10161b;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:calc(var(--hive-cell) * var(--hive-zoom,1)) calc(var(--hive-cell) * var(--hive-zoom,1));
  transform-origin:top left;
}
.hive-grid-element{
  position:absolute;
  left:calc(var(--x) * var(--hive-cell) * var(--hive-zoom,1));
  top:calc(var(--y) * var(--hive-cell) * var(--hive-zoom,1));
  width:calc(var(--w) * var(--hive-cell) * var(--hive-zoom,1));
  height:calc(var(--h) * var(--hive-cell) * var(--hive-zoom,1));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(4px * var(--hive-zoom,1));
  border:calc(2px * var(--hive-zoom,1)) solid rgba(255,255,255,.65);
  background:var(--element-bg);color:#101318;text-align:center;line-height:1.05;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);overflow:hidden;
}
.hive-grid-element.base{border-radius:8px}
.hive-grid-element.alliance-event{background:#b91c1c;color:#fff;border-radius:50%;font-weight:900}
.hive-grid-element.free{opacity:.62;background:#374151!important;color:#fff}
.hive-element-title{max-width:100%;font-size:calc(10px * var(--hive-zoom,1));font-weight:900;overflow-wrap:anywhere}
.hive-element-coordinate{position:absolute;left:calc(3px * var(--hive-zoom,1));bottom:calc(2px * var(--hive-zoom,1));z-index:6;font-size:calc(9px * var(--hive-zoom,1));font-weight:900;line-height:1;opacity:.96;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.95),1px 0 1px rgba(0,0,0,.9),-1px 0 1px rgba(0,0,0,.9),0 -1px 1px rgba(0,0,0,.9)}
.hive-grid-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:calc(22px * var(--hive-zoom,1));height:calc(22px * var(--hive-zoom,1));border-radius:50%;border:2px solid #fff;color:#fff;font-size:calc(13px * var(--hive-zoom,1));font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.7)}
.hive-grid-status.ok{background:#20894e}.hive-grid-status.wrong{background:#bd1e2c}
.hive-grid-element.active{animation:hiveGridPulse .7s ease-in-out 3;z-index:100!important}@keyframes hiveGridPulse{50%{filter:brightness(1.7);box-shadow:0 0 0 10px rgba(245,185,66,.45)}}
@media(max-width:700px){.hive-grid-canvas{--hive-cell:28px}}

/* v5.6.1 – Marschalls Wache als Grafik und Status in der oberen Rasterreihe */
.hive-grid-element.alliance-event{
  padding:calc(3px * var(--hive-zoom,1));
  border-radius:8px;
  background:transparent;
  color:inherit;
}
.hive-alliance-event-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.48));
}
.hive-grid-status{
  top:var(--status-top,16.6667%);
}

/* v5.7.0 – größere Namen und kompakte Hover-Informationen */
.hive-element-title{
  position:relative;
  z-index:7;
  width:100%;
  padding-inline:calc(3px * var(--hive-zoom,1));
  color:#fff;
  font-size:calc(13px * var(--hive-zoom,1));
  font-weight:900;
  line-height:1.05;
  text-wrap:balance;
  overflow-wrap:anywhere;
  text-shadow:0 1px 2px rgba(0,0,0,.98),1px 0 1px rgba(0,0,0,.95),-1px 0 1px rgba(0,0,0,.95),0 -1px 1px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.9);
}
.hive-element-title.name-md{font-size:calc(12px * var(--hive-zoom,1))}
.hive-element-title.name-lg{font-size:calc(11px * var(--hive-zoom,1))}
.hive-element-title.name-xl{font-size:calc(10px * var(--hive-zoom,1))}
.hive-grid-element.has-member{cursor:pointer}
.hive-grid-element.has-member:focus-visible{outline:calc(3px * var(--hive-zoom,1)) solid #fff;outline-offset:calc(-3px * var(--hive-zoom,1))}
.hive-grid-status.unknown{background:#59636d}
.hive-hover-card{
  position:fixed;
  z-index:1000;
  width:min(270px,calc(100vw - 16px));
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(8,11,14,.97);
  color:#f2f4f5;
  box-shadow:0 16px 42px rgba(0,0,0,.62);
  pointer-events:none;
  backdrop-filter:blur(8px);
}
.hive-hover-card[hidden]{display:none}
.hive-hover-card strong{display:block;margin-bottom:9px;font-family:"Rajdhani",sans-serif;font-size:1.15rem;letter-spacing:.04em}
.hive-hover-card dl{display:grid;gap:6px;margin:0}
.hive-hover-card dl>div{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:start}
.hive-hover-card dt{color:var(--muted);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.hive-hover-card dd{margin:0;text-align:right;font-weight:800}
.hive-hover-card dd.ok{color:#67d99b}.hive-hover-card dd.wrong{color:#ff7379}.hive-hover-card dd.unknown{color:#aab2ba}

/* v5.8.0 – PNG-Export des vollständigen Hiveplans */
.hive-export-status{min-width:170px;font-size:.82rem}
@media(max-width:700px){.hive-export-status{width:100%;min-width:0}}


/* v5.8.2 – feste 130 Prozent; Planfenster wächst mit der Rasterhöhe */
.hive-viewport{
  height:var(--hive-viewport-height,auto);
  min-height:0;
  max-height:none;
  overflow-x:auto;
  overflow-y:hidden;
}
@media(max-width:700px){
  .hive-viewport{min-height:0;max-height:none}
}


/* v5.8.3 – normales vertikales Seitenscrolling auch über dem Hiveplan */
.hive-viewport{overscroll-behavior-y:auto;touch-action:pan-x pan-y}