/* ═══════════════════════════════════════════════════════════════
   KOLLEKTIVORTE RUHR – Stylesheet v6
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { height: 100%; height: 100dvh; overflow: hidden }
body { height: 100%; height: 100dvh; overflow: hidden; display: flex; flex-direction: column }
#kor-root { flex: 1 !important; min-height: 0 !important }

.maplibregl-ctrl-attrib, .maplibregl-ctrl-logo,
.maplibregl-ctrl-top-right, .maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-right { display: none !important }
.maplibregl-canvas { outline: none }

/* ── Stadtlabels ── */
#kor-city-overlay { position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden }
.kor-city {
  position:absolute; transform:translate(-50%,-50%);
  font-family:'Hanken Grotesk',system-ui,Arial,sans-serif;
  letter-spacing:.12em; text-transform:uppercase; color:#5a5040;
  pointer-events:none; white-space:nowrap;
  text-shadow:0 0 6px rgba(251,249,244,1),1px 1px 0 rgba(251,249,244,.95),-1px -1px 0 rgba(251,249,244,.95);
}
.kor-city.major     { font-size:11px; font-weight:700 }
.kor-city.secondary { font-size:9px;  font-weight:500; opacity:.85 }

/* ── Fähnchen-Overlay ── */
#kor-flag-overlay { position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden }

/* ── Pin ── */
#kor-pin { position:absolute;transform:translate(-50%,-100%);pointer-events:none;z-index:20 }
.kor-pin-dot {
  width:13px;height:13px;border-radius:50%;background:#1c1a16;border:2px solid #fbf9f4;
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  box-shadow:0 2px 6px rgba(40,34,24,.35);
}
.kor-pin-pulse {
  width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(28,26,22,.35);
  position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);
  animation:korpulse 1.5s ease-out infinite;
}
@keyframes korpulse {
  0%   { transform:translateX(-50%) scale(.5);opacity:.9 }
  100% { transform:translateX(-50%) scale(1.4);opacity:0 }
}

/* ── Erfolgsmarker ── */
.kor-temp-marker { position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:20 }
.kor-temp-marker::before {
  content:'';display:block;width:18px;height:18px;border-radius:50%;
  background:var(--mc,#4fb47a);animation:korsucc 1s ease-out 3;
}
.kor-temp-marker::after {
  content:'';display:block;width:42px;height:42px;border-radius:50%;
  border:1.5px solid var(--mc,#4fb47a);
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  animation:korsucc 1s ease-out 3;opacity:.6;
}
@keyframes korsucc {
  0%   { transform:translate(-50%,-50%) scale(.4);opacity:1 }
  100% { transform:translate(-50%,-50%) scale(1.7);opacity:0 }
}

/* ── Foto ── */
#kor-d-photo {
  position:relative;width:100%;height:160px;flex-shrink:0;overflow:hidden;
  background:rgba(28,26,22,.05);border-bottom:1px solid rgba(28,26,22,.13);display:none;
}
#kor-d-photo.has-image { display:block }
#kor-d-photo img { width:100%;height:100%;object-fit:cover;display:block }
.kor-photo-credit {
  position:absolute;bottom:5px;right:7px;font-size:8px;
  color:rgba(251,249,244,.8);background:rgba(28,26,22,.5);
  padding:1px 6px;border-radius:2px;pointer-events:none;
}

/* ═══════════════════════════════════════════════════════
   MOBILE ≤ 768px – Zwei-Zeilen Header
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Desktop-only Elemente verstecken */
  .hdr-desktop { display: none !important }
  .hdr-sub     { display: none !important }

  /* Mobile-only Elemente zeigen */
  .hdr-mobile  { display: flex !important }
  .hdr-row2    { display: flex !important }

  /* Suche kleiner */
  [data-kor="searchwrap"] { max-width: 150px !important }

  /* Footer-Logos kompakter auf Mobile */
  footer img { height: 13px !important }

  /* Panels: Bottom-Sheets mit Rand */
  #kor-detail, #kor-list {
    top: auto !important;
    left: 8px !important; right: 8px !important;
    width: auto !important;
    bottom: calc(var(--footer-h, 42px) + 8px) !important;
    max-height: 62dvh !important;
    border-radius: 12px !important;
    border: 1px solid rgba(28,26,22,.15) !important;
  }
  #kor-form {
    left: 8px !important; right: 8px !important;
    width: auto !important;
    bottom: calc(var(--footer-h, 42px) + 8px) !important;
    top: auto !important;
    max-height: 76dvh !important;
    border-radius: 12px !important;
    border: 1px solid rgba(28,26,22,.15) !important;
  }

  #kor-d-photo { height: 120px !important }

  /* Zoom-Buttons aus dem Weg der Bottom-Sheets nach oben holen */
  #kor-zoom { bottom: auto !important; top: 58px !important }

  /* Legende darf umbrechen statt zu überlaufen */
  #kor-legend-mobile { flex-wrap: wrap !important; row-gap: 3px !important }

  /* Hinweis-Tooltip schmaler halten */
  #kor-hint { max-width: calc(100% - 24px) !important; white-space: normal !important; text-align: center }
}

/* ═══════════════════════════════════════════════════════
   TABLET 769–1024px – Buttons/Legende etwas kompakter
   ═══════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  #kor-legend .leg-label { display: none }     /* nur Farbpunkte zeigen */
  #kor-legend button { padding: 0 6px !important }
  [data-kor="searchwrap"] { max-width: 190px !important }
}

/* ═══════════════════════════════════════════════════════
   Sehr kleine Phones ≤ 390px – Fähnchen + Panels kompakter
   ═══════════════════════════════════════════════════════ */
@media (max-width: 390px) {
  #kor-detail, #kor-list { max-height: 66dvh !important }
}

/* Touch-Geräte: größere, gut tippbare Schaltflächen */
@media (hover: none) and (pointer: coarse) {
  #kor-zin, #kor-zout { width: 40px !important; height: 40px !important; font-size: 20px !important }
  [data-close] { padding: 8px 10px !important }
}