/* ============================================================
   Zukunftsschulen SH – Kartenmodul: Styles
   Ablage: files/karte/zukunftsschulen.css
   Farben nach dem Auftritt des IQSH / Landes Schleswig-Holstein.
   ============================================================ */

.zs{/* Farben nach dem Auftritt des IQSH / Landes Schleswig-Holstein */
    --zs-blue:#003064;        /* Primärblau: Überschriften, Navigation, Buttons */
    --zs-blue-dark:#011e4a;   /* Dunkelblau: Links, Hover                       */
    --zs-red:#d4004b;         /* Signalrot: Akzente, aktive Auswahl             */
    --zs-bg:#fff;--zs-fg:#011e4a;--zs-muted:#4a4a4a;--zs-line:#d6dbe1;
    --zs-accent:var(--zs-blue);--zs-soft:#f9fafb;--zs-radius:8px;
    --zs-map-h:460px;         /* Höhe der Karte – hier zentral anpassen        */
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--zs-fg);font-size:15px;line-height:1.45;box-sizing:border-box;
    padding:2px}   /* schmaler unsichtbarer Rand, damit Fokusrahmen und Schatten nicht abschneiden */
.zs *,.zs *::before,.zs *::after{box-sizing:inherit}
.zs button,.zs input,.zs label{font:inherit;color:inherit}

/* --- Filterleiste --- */
.zs-bar{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.zs-search{position:relative;flex:0 1 240px;min-width:170px}
.zs-search input{width:100%;padding:9px 32px 9px 12px;border:1px solid var(--zs-line);
    border-radius:var(--zs-radius);background:var(--zs-bg)}
.zs-search input:focus{outline:2px solid var(--zs-accent);outline-offset:-1px;border-color:transparent}
.zs-search .zs-clear{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;
    background:none;cursor:pointer;color:var(--zs-muted);padding:4px 8px;line-height:1;font-size:18px}
.zs-dd{position:relative}
.zs-dd>button{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--zs-line);
    border-radius:var(--zs-radius);background:var(--zs-bg);cursor:pointer;white-space:nowrap}
.zs-dd>button:hover{border-color:var(--zs-muted)}
.zs-dd>button[aria-expanded="true"]{border-color:var(--zs-accent);box-shadow:0 0 0 1px var(--zs-accent)}
.zs-dd .zs-caret{border:solid var(--zs-muted);border-width:0 1.5px 1.5px 0;padding:2.5px;
    transform:rotate(45deg);margin-top:-3px}
.zs-count{background:var(--zs-red);color:#fff;border-radius:20px;padding:0 7px;font-size:12px;
    font-weight:600;line-height:18px;min-width:18px;text-align:center}
.zs-panel{position:absolute;z-index:1200;top:calc(100% + 4px);left:0;min-width:240px;max-width:330px;
    max-height:320px;overflow:auto;background:var(--zs-bg);border:1px solid var(--zs-line);
    border-radius:var(--zs-radius);box-shadow:0 6px 24px rgba(0,0,0,.16);padding:6px;display:none}
.zs-dd.zs-open .zs-panel{display:block}
/* Das letzte Filterfeld klappt nach links auf, damit es nicht rechts hinausläuft */
.zs-dd[data-field="stufe"] .zs-panel{left:auto;right:0;min-width:160px}
.zs-panel label{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-radius:6px;cursor:pointer}
.zs-panel label:hover{background:var(--zs-soft)}
.zs-panel input{margin:3px 0 0;flex:none}
.zs-panel .zs-n{margin-left:auto;color:var(--zs-muted);font-size:12px;padding-left:8px}
.zs-reset{border:1px solid transparent;background:none;color:var(--zs-blue-dark);cursor:pointer;
    padding:9px 10px;border-radius:var(--zs-radius);text-decoration:underline}
.zs-reset:hover{background:var(--zs-soft)}
/* Trefferzahl steht unterhalb der Karte */
.zs-result{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--zs-blue-dark)}
.zs-result + .zs-hint{margin-top:2px}

/* --- Layout --- */
.zs-main{display:flex;gap:12px;align-items:stretch}
.zs-list{flex:0 0 300px;max-height:var(--zs-map-h);overflow-y:auto;border:1px solid var(--zs-line);
    border-radius:var(--zs-radius);background:var(--zs-bg)}
.zs-item{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--zs-line);
    background:none;padding:10px 12px;cursor:pointer}
.zs-item:last-child{border-bottom:0}
.zs-item:hover,.zs-item:focus{background:var(--zs-soft);outline:none}
.zs-item.zs-active{background:#eef2f7;box-shadow:inset 3px 0 0 var(--zs-red)}
.zs-item b{display:block;font-weight:600;font-size:14px;color:var(--zs-blue-dark)}
.zs-item span{display:block;font-size:12.5px;color:var(--zs-muted)}
.zs-item .zs-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;
    vertical-align:1px}
.zs-empty{padding:18px 14px;color:var(--zs-muted);font-size:14px}
/* Liste erscheint erst, wenn etwas gesucht wird – sonst hat die Karte die volle Breite */
.zs-main.zs-nolist .zs-list{display:none}
.zs-map{flex:1 1 auto;height:var(--zs-map-h);min-width:0;border:1px solid var(--zs-line);
    border-radius:var(--zs-radius);z-index:0}

/* --- Popup --- */
.zs .leaflet-popup-content{margin:12px 14px;width:270px!important;font-size:14px}
.zs-pop h3{margin:0 0 2px;font-size:15px;line-height:1.3;color:var(--zs-blue)}
.zs-pop .zs-art{font-size:12.5px;font-weight:600}
.zs-pop address{font-style:normal;color:var(--zs-muted);font-size:13px;margin:6px 0 0}
.zs-pop h4{margin:10px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
    color:var(--zs-muted)}
.zs-pop ul{margin:0;padding-left:17px}
.zs-pop li{margin-bottom:2px}
.zs-tags{display:flex;flex-wrap:wrap;gap:4px}
.zs-tag{background:var(--zs-soft);border:1px solid var(--zs-line);border-radius:20px;
    padding:1px 9px;font-size:12px}
.zs-pop a.zs-link{display:inline-block;margin-top:10px;color:var(--zs-red);font-weight:600;font-size:13px}

/* --- Basiskarte entsättigen, damit die Marker hervortreten --- */
/* Varianten: grayscale(1) = ganz grau | saturate(.35) = zarte Restfarbe
   | none = Originalfarben der Karte                                     */
.zs .leaflet-tile-pane{filter:grayscale(.92) brightness(1.06) contrast(.92)}

/* --- Kreis-Cluster --- */
.zs-kreis{background:none;border:0}
.zs-kreis .zs-k-bubble{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;
    justify-content:center;background:var(--zs-blue);color:#fff;font-weight:700;
    border:3px solid rgba(255,255,255,.9);box-shadow:0 2px 6px rgba(0,0,0,.3);
    transition:background .15s,transform .15s}
.zs-kreis:hover .zs-k-bubble{background:var(--zs-red);transform:scale(1.06)}
.zs-kreis .zs-k-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);
    margin-top:3px;white-space:nowrap;font-size:12px;font-weight:700;color:var(--zs-blue-dark);
    text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff}
.zs-hint{font-size:12.5px;color:var(--zs-muted);margin:8px 0 0}

/* --- Marker & Legende --- */
.zs-pin{background:none;border:0}
.zs-pin svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
/* Legende der Schularten ausgeblendet – zum Wiedereinschalten "display:none" entfernen */
.zs-legend{display:none;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12.5px;
    color:var(--zs-muted)}
.zs-legend span{display:flex;align-items:center;gap:6px}
.zs-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.zs-credit{margin-top:6px;font-size:11.5px;color:var(--zs-muted)}

@media (max-width:820px){
  /* schmale Ansicht: Filterlisten über die volle Breite unter die Leiste legen,
     sonst laufen sie bei umgebrochenen Buttons seitlich aus dem Bild */
  .zs-dd{position:static}
  .zs-panel,.zs-dd[data-field="stufe"] .zs-panel{left:0;right:0;min-width:0;max-width:none}
  .zs-main{flex-direction:column}
  .zs-list{flex:none;max-height:240px;order:2}
  .zs-map{height:360px;order:1}
}