/* ═══════════════════════════════════════════════════════════════
   Portal-Ansicht — echte Oberflaeche in HTML/SVG statt Screenshot.
   Bleibt auf jedem Display scharf und ist in Deutsch beschriftet.
   ═══════════════════════════════════════════════════════════════ */

.portal{
  position:relative;display:grid;grid-template-columns:1fr 290px;
  background:oklch(0.205 0.030 252);border:1px solid var(--line);
  box-shadow:0 40px 90px oklch(0.08 0.02 252 / .55);
  overflow:hidden;
}

/* ── Kopfzeile ───────────────────────────────────────────────── */
.portal-bar{grid-column:1 / -1;display:flex;align-items:center;gap:14px;
  padding:12px 16px;border-bottom:1px solid var(--line);
  background:oklch(0.175 0.028 252)}
.portal-dots{display:flex;gap:6px}
.portal-dots i{width:9px;height:9px;border-radius:50%;background:var(--line);
  display:block}
.portal-title{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.portal-live{margin-left:auto;display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--accent)}
.portal-live::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ── Karte ───────────────────────────────────────────────────── */
.portal-map{position:relative;min-height:clamp(300px,46vh,470px);
  background:
    radial-gradient(120% 90% at 30% 20%, oklch(0.245 0.034 252) 0%, transparent 60%),
    oklch(0.195 0.028 252)}
.portal-map svg{position:absolute;inset:0;width:100%;height:100%}

.road-main{fill:none;stroke:oklch(0.375 0.030 250);stroke-width:5;
  stroke-linecap:round;stroke-linejoin:round}
.road-side{fill:none;stroke:oklch(0.295 0.026 250);stroke-width:2.4;
  stroke-linecap:round}
.water{fill:none;stroke:oklch(0.330 0.045 235);stroke-width:7;
  stroke-linecap:round;opacity:.75}
.parcel{fill:oklch(0.225 0.030 252);stroke:oklch(0.275 0.026 250);stroke-width:1}

.route-ghost{fill:none;stroke:oklch(0.40 0.05 250);stroke-width:3.4;
  stroke-linecap:round;stroke-dasharray:2 7;opacity:.85}
.route-done{fill:none;stroke:var(--accent);stroke-width:3.6;stroke-linecap:round}

.geo-zone{fill:oklch(0.775 0.150 82 / .07);stroke:var(--accent);
  stroke-width:1.4;stroke-dasharray:5 5}

.stop{fill:oklch(0.205 0.030 252);stroke:oklch(0.60 0.03 250);stroke-width:2}
.truck-halo{fill:oklch(0.775 0.150 82 / .18)}
.truck{fill:var(--accent);stroke:oklch(0.17 0.028 252);stroke-width:2}

.map-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.10em;
  fill:oklch(0.575 0.028 250);text-transform:uppercase}

/* Sprechblase am Fahrzeug */
.truck-tip{position:absolute;z-index:3;transform:translate(-50%,-140%);
  background:oklch(0.145 0.026 252 / .95);border:1px solid var(--line);
  padding:9px 12px;white-space:nowrap;pointer-events:none}
.truck-tip b{display:block;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:var(--ink)}
.truck-tip span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--accent)}

/* Kartenwerkzeuge, bewusst als Deko markiert */
.map-tools{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;
  gap:1px;background:var(--line)}
.map-tools i{width:28px;height:28px;display:grid;place-items:center;
  background:oklch(0.185 0.028 252);color:var(--muted);
  font-family:var(--mono);font-size:13px;font-style:normal}

/* ── Seitenspalte: Fahrzeuge ─────────────────────────────────── */
.portal-side{border-left:1px solid var(--line);background:oklch(0.175 0.027 252);
  display:flex;flex-direction:column}
.side-h{padding:13px 15px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
.veh{display:grid;grid-template-columns:9px 1fr auto;gap:10px;align-items:center;
  padding:13px 15px;border-bottom:1px solid var(--line)}
.veh i{width:9px;height:9px;border-radius:50%;background:oklch(0.55 0.11 145)}
.veh.idle i{background:oklch(0.70 0.13 82)}
.veh.off  i{background:oklch(0.42 0.02 250)}
.veh-name{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink)}
.veh-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.veh-val{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-align:right}
.veh.on .veh-val{color:var(--accent)}

.side-foot{margin-top:auto;padding:14px 15px;border-top:1px solid var(--line)}
.side-foot p{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.bar{height:5px;background:oklch(0.265 0.026 250);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);width:62%}
.side-foot small{display:block;margin-top:8px;font-size:11.5px;color:var(--muted)}

/* Hinweis, dass es eine Beispielansicht ist */
.portal-note{grid-column:1 / -1;padding:9px 16px;border-top:1px solid var(--line);
  background:oklch(0.155 0.026 252);font-family:var(--mono);font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:oklch(0.50 0.026 250)}

@media (max-width:860px){
  .portal{grid-template-columns:1fr}
  .portal-side{border-left:0;border-top:1px solid var(--line)}
  .veh:nth-child(n+4){display:none}
  .portal-map{min-height:clamp(260px,40vh,360px)}
}