/* Seekarte der Kunden-App – gehört zu assets/js/map.js.
   Farben liegen als Variablen vor, damit die Karte dem Design der App folgt. */
:root {
  --map-sea: #cfe3f2; --map-land: #f5f1e8; --map-coast: #9db5c6; --map-border: #d9cfbd;
  --map-label: #8494a3; --map-place: #4a5c6b; --map-river: #8ab4d2; --map-pier: #9a9a92; --map-pin: #0b4f8a; --map-pin-itn: #00a3d9; --map-pin-good: #16794c; --map-pin-bad: #b3261e;
}

.k1map { position: relative; width: 100%; height: 100%; min-height: 320px; min-width: 0; max-width: 100%; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line); background: var(--map-sea); box-shadow: var(--shadow); touch-action: none; }
/* Das Zeichenfeld bekommt seine Breite in Pixeln gesetzt – es darf den Behälter nie breiter machen */
.map-shell { min-width: 0; max-width: 100%; overflow: hidden; }
.k1map-cv { max-width: 100%; }
.k1map-cv { display: block; width: 100%; height: 100%; cursor: grab; }
.k1map-cv:active { cursor: grabbing; }
.k1map-cv:focus-visible { outline: 3px solid #ffbf00; outline-offset: -3px; }

.k1map-ui { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.k1map-zoom { display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px; box-shadow: var(--shadow); }
.k1map-zoom button { width: 38px; height: 38px; border: 0; background: transparent; border-radius: 9px; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: var(--ink); font-family: inherit; }
.k1map-zoom button:hover { background: var(--info-bg); color: var(--primary); }

.k1map-marks { border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 12px;
  padding: 8px 10px; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow); }
.k1map-marks.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* „Route planen“ – deutlich hervorgehoben im Hafenführer (29.09.2026) */
.route-cta { display: flex; align-items: center; gap: 14px; margin: 12px 0; padding: 14px 16px; border-radius: var(--r);
  background: linear-gradient(135deg, var(--ocean) 0%, var(--ocean-mid) 60%, #004a8f 100%); color: #fff !important;
  text-decoration: none !important; box-shadow: 0 8px 22px rgba(0, 51, 102, .22); transition: transform .15s, box-shadow .15s; }
.route-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0, 51, 102, .28); color: #fff; }
.route-cta:focus-visible { outline: 3px solid #ffbf00; outline-offset: 2px; }
.route-cta-ic { display: inline-flex; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .16);
  align-items: center; justify-content: center; flex: none; }
.route-cta-ic .ic { width: 26px; height: 26px; }
.route-cta-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.route-cta-txt strong { font-size: 1.08rem; }
.route-cta-txt span { font-size: .86rem; opacity: .9; line-height: 1.35; }
.route-cta-btn { flex: none; background: #fff; color: var(--primary) !important; font-weight: 700; pointer-events: none; }
@media (max-width: 560px) {
  .route-cta { flex-wrap: wrap; }
  .route-cta-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .route-cta { transition: none; } .route-cta:hover { transform: none; } }

/* Hinweis auf die Seekarten – gut sichtbar unter der Karte */
.chart-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: var(--r-sm); background: var(--info-bg); padding: 12px 14px; }
.chart-cta-ic { display: inline-flex; width: 36px; height: 36px; border-radius: 10px; background: var(--card);
  color: var(--primary); align-items: center; justify-content: center; flex: none; }
.chart-cta-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; }
.chart-cta .btn { flex: none; }

/* Seekarten-Pakete */
.chart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.chart-item { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.chart-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.chart-actions { display: flex; gap: 8px; flex: none; }
.chart-item.is-on { border-color: #b8e2cc; background: var(--good-bg); }

.k1map-attr { position: absolute; left: 8px; bottom: 6px; margin: 0; font-size: .7rem; color: var(--muted);
  background: rgba(255,255,255,.78); border-radius: 6px; padding: 2px 6px; max-width: calc(100% - 70px); }

.k1map-hint { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; text-align: center; padding: 16px;
  background: rgba(15,34,51,.5); color: #fff; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 4; }
.k1map-hint.on { opacity: 1; }

.k1map-pop { position: absolute; z-index: 3; width: min(280px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(15,34,51,.18); }
.k1map-pop[hidden] { display: none; }
.k1map-pop strong { padding-right: 24px; font-size: 1rem; line-height: 1.25; }
.k1map-x { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; border: 0; background: transparent;
  border-radius: 8px; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--muted); }
.k1map-x:hover { background: var(--bg); color: var(--ink); }
.k1map-price { font-weight: 700; color: var(--primary-dark); font-size: .92rem; }
.k1map-osm { font-size: .8rem; color: #8a5a00; }                  /* „aus OpenStreetMap · nicht geprüft“ */
.k1map-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.k1map-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }   /* umbrechen: 4 Knöpfe (Route) passen nicht in eine Zeile */
.k1map-btns .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
.k1map-match { position: absolute; right: 40px; top: 12px; font-weight: 700; font-size: .85rem; color: var(--good); }
.k1map-match.bad { color: var(--bad); }

/* Kartenseite: Karte füllt den Platz unter der Suchleiste */
.map-page { display: flex; flex-direction: column; gap: 10px; }
.map-shell { height: clamp(360px, calc(100vh - 330px), 760px); min-width: 0; }
.map-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.map-chips::-webkit-scrollbar { height: 6px; }
.map-chips + .map-chips { margin-top: 8px; }
.map-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); border-radius: 999px; padding: 8px 14px; font-size: .88rem; font-weight: 600;
  text-decoration: none; min-height: var(--tap); cursor: pointer; font-family: inherit; }
.map-chip:hover { border-color: var(--accent); color: var(--primary); }
.map-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.map-chip.on:hover { color: #fff; }
.map-chip .ic { width: 16px; height: 16px; }
.map-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.lg-itn { background: var(--map-pin-itn); }
.lg-fit { background: var(--map-pin-good); }
.lg-bad { background: var(--map-pin-bad); }
.lg-plain { background: var(--map-pin); }
.lg-osm { background: #7d8d9c; }                                  /* OSM-Häfen, nicht geprüft (FARBE.osm in k1map.js) */

/* Passung in Listen */
.match-badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .85rem; color: var(--good); }
.match-badge.warn { color: var(--warn); }
.match-badge.bad { color: var(--bad); }
.match-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; max-width: 120px; }
.match-bar i { display: block; height: 100%; background: var(--good); }
.match-bar.bad i { background: var(--bad); }
.match-bar-full { max-width: 100%; }   /* Hafenseite: volle Breite (vorher Inline-style, von der CSP blockiert) */
.match-why { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.match-why li { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; }
.match-why .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.match-why .ok { color: var(--good); }
.match-why .warn { color: var(--warn); }
.match-why .bad { color: var(--bad); }

/* Verfügbarkeit */
.avail { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin: 8px 0; }
.avail-day { border: 1px solid var(--line); border-radius: 12px; padding: 8px; text-align: center; background: var(--card); }
.avail-day b { display: block; font-size: .8rem; color: var(--muted); font-weight: 600; }
.avail-day .st { display: block; margin-top: 4px; font-weight: 700; font-size: .9rem; }
.avail-free { border-color: #b8e2cc; background: var(--good-bg); } .avail-free .st { color: var(--good); }
.avail-few { border-color: #f0dca6; background: var(--warn-bg); } .avail-few .st { color: var(--warn); }
.avail-full { border-color: #f4c3be; background: var(--bad-bg); } .avail-full .st { color: var(--bad); }
.avail-unknown .st { color: var(--muted); font-weight: 600; }

/* Datenqualität */
.dq { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dq-ring { --p: 0; width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0); }
.dq-ring span { width: 42px; height: 42px; border-radius: 50%; background: var(--card); display: grid; place-items: center;
  font-weight: 700; font-size: .82rem; }

/* Route */
.route-form .grid3 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .route-form .grid3 { grid-template-columns: 1fr 1fr 140px; } }
.route-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.route-step { display: flex; gap: 12px; align-items: flex-start; }
.route-km { flex: none; width: 76px; text-align: right; font-weight: 700; color: var(--primary-dark); font-size: .9rem; padding-top: 14px; }

/* Karten bleiben hell – auch im dunklen Design der App (30.09.2026); die früheren dunklen Kartenfarben sind entfernt. */

/* Auf dem Handy niedriger, damit neben der Karte genug Fläche zum Weiterblättern bleibt */
@media (max-width: 700px) { .map-shell { height: clamp(300px, 46vh, 420px); } }

/* Freie Plätze melden: Eingabefeld statt Text in der Tageskarte */
.avail-input { width: 100%; text-align: center; margin-top: 4px; min-height: 36px; }

/* Wetter am Hafen (abschaltbare Zusatzfunktion) */
.wx-hours { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; margin: 8px 0; }
.wx-hour { border: 1px solid var(--line); border-radius: 12px; padding: 8px 6px; text-align: center; background: var(--card);
  display: flex; flex-direction: column; gap: 2px; }
.wx-hour b { font-size: .8rem; color: var(--muted); font-weight: 600; }
.wx-w { font-weight: 700; font-size: .92rem; }
.wx-t { font-size: .85rem; }
.wx-r { font-size: .78rem; color: var(--primary); }

/* Handy: Anzeige aufräumen (steht am Ende, damit es die Grundregeln überschreibt) */
@media (max-width: 700px) {
  /* Ansicht wechseln und Gespeicherte stehen am Handy in der unteren Leiste – oben wäre es doppelt */
  .chips-nav { display: none; }
  /* Die Filter bleiben, brechen aber um statt eine Bildlaufleiste zu zeigen – und werden kompakter,
     damit zwei nebeneinander passen und die Karte nicht nach unten gedrückt wird */
  .map-chips { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; gap: 6px; }
  .map-chip { padding: 6px 12px; font-size: .82rem; min-height: 38px; }
  .map-chip .ic { width: 15px; height: 15px; }
}