/* ==================================================================
   map.css - Darstellung der Seekarte.
   Wird von Schuelerportal und Beameransicht gemeinsam verwendet.
   ================================================================== */

.kmap { display: block; width: 100%; height: auto; }

/* ---------------- Meer ---------------- */

.graticule line { stroke: rgba(140, 190, 245, 0.055); stroke-width: 1; stroke-dasharray: 2 9; }

.sea-depths .depth {
  fill: none;
  stroke: rgba(92, 200, 255, 0.16);
  stroke-width: 1.1;
  opacity: calc(0.85 - var(--i) * 0.16);
}
.sea-depths .depth:nth-child(odd) { stroke-dasharray: 14 9; }

/* ---------------- Kueste ---------------- */

.coast-halo { fill: rgba(92, 200, 255, 0.10); stroke: none; }
.coast { fill: none; stroke: rgba(186, 222, 255, 0.82); stroke-width: 2.4; stroke-linejoin: round; }
.beach { fill: none; stroke: rgba(232, 216, 176, 0.13); stroke-width: 11; stroke-linejoin: round; }

/* ---------------- Relief ---------------- */

.contour { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.contour.major { stroke: rgba(176, 208, 250, 0.26); stroke-width: 1.15; }
.contour.minor { stroke: rgba(176, 208, 250, 0.13); stroke-width: 0.85; }

.river {
  fill: none; stroke: rgba(120, 205, 255, 0.55);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

.terrain, .relief { pointer-events: none; }

/* ---------------- Kartenrandwerk ---------------- */

.compass, .scalebar { pointer-events: none; }
.compass-n {
  font-size: 15px; font-weight: 700; letter-spacing: 0.12em;
  fill: rgba(242, 193, 78, 0.85);
}
.scale-t { font-size: 11px; fill: rgba(150, 190, 240, 0.6); letter-spacing: 0.06em; }

/* ---------------- Regionen ---------------- */

.rl-name { font-size: 12px; font-weight: 700; letter-spacing: 0.11em; }
.rl-sub { font-size: 10px; fill: #9fb0d0; letter-spacing: 0.04em; }
.region-label rect { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)); }
.region-glow, .region-label { pointer-events: none; }

/* ---------------- Wege ---------------- */

.route {
  fill: none; stroke: rgba(160, 200, 245, 0.34);
  stroke-width: 1.6; stroke-dasharray: 5 9; stroke-linecap: round;
}
.route.locked { stroke: rgba(160, 200, 245, 0.11); }

/* ---------------- Knoten ---------------- */

.node { cursor: pointer; outline: none; }
.node .node-halo { opacity: 0.13; transition: opacity 0.25s; }
.node .node-plate { stroke: rgba(150, 190, 240, 0.18); stroke-width: 1; }
.node .node-ring { opacity: 0.85; }
.node .node-core { transition: r 0.2s; }
.node .node-id {
  font-size: 12px; font-weight: 700; fill: #cdd9f0;
  letter-spacing: 0.09em; opacity: 0.8;
  paint-order: stroke; stroke: rgba(4, 9, 18, 0.9); stroke-width: 3px; stroke-linejoin: round;
}
.node:hover .node-halo, .node:focus-visible .node-halo { opacity: 0.32; }
.node:hover .node-core { r: 12; }
.node:focus-visible .node-ring { stroke-width: 3.6; }

.node.locked { cursor: not-allowed; }
.node.locked .node-ring, .node.locked .node-core { opacity: 0.3; }
.node.locked .node-plate { opacity: 0.6; }
.node.locked .node-id { opacity: 0.34; }

.node.open .node-ring { animation: ringPulse 2.6s ease-in-out infinite; }
@keyframes ringPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.node.solved .node-halo { opacity: 0.28; }
.node-held { opacity: 0.85; animation: heldSpin 30s linear infinite; }
@keyframes heldSpin { to { stroke-dashoffset: -120; } }

.node-pulse { animation: pulseOut 2.1s ease-out forwards; }
@keyframes pulseOut { to { r: 78; opacity: 0; stroke-width: 0.6; } }

@media (prefers-reduced-motion: reduce) {
  .node.open .node-ring, .node-held { animation: none; }
}