/* =====================================================================
   JUNGES OSTALLGÄU — ANPACKEN
   Interaktive, kachelfreie Landkreis-Karte. Baut vollständig auf den
   Design-Tokens aus css/site.css auf; keine externen Farben oder Fonts.
   ===================================================================== */

/* ---------- EINSTIEG UND BEDIENUNG ---------- */
.anp-section{
  background:var(--paper);
}

.anp-intro{
  max-width:760px;
  margin-bottom:clamp(1.75rem,4vw,2.75rem);
}

.anp-intro .h2{
  margin:.85rem 0 .8rem;
}

.anp-intro p{
  color:var(--muted);
  font-size:1rem;
  line-height:1.7;
}

.anp-controls{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.25rem 2rem;
  margin-bottom:1.25rem;
  padding:1rem 1.1rem;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}

.anp-select-wrap{
  position:relative;
  display:grid;
  gap:.4rem;
  min-width:min(100%,20rem);
}

.anp-select-wrap::after{
  content:"";
  position:absolute;
  right:1.05rem;
  bottom:1.15rem;
  width:8px;
  height:8px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
  pointer-events:none;
}

.anp-select-wrap label{
  color:var(--navy);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.35;
  text-transform:uppercase;
}

#municipality-select{
  width:100%;
  min-height:46px;
  padding:.7rem 2.75rem .7rem .9rem;
  color:var(--text);
  font-size:max(16px,.94rem);
  line-height:1.25;
  background-color:var(--white);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  appearance:none;
  cursor:pointer;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}

#municipality-select:hover{
  border-color:var(--blue-300);
}

#municipality-select:focus{
  outline:none;
  border-color:var(--blue-500);
  box-shadow:0 0 0 4px var(--blue-100);
}

#municipality-select:disabled{
  color:var(--muted-2);
  background-color:var(--paper);
  border-color:var(--line);
  cursor:not-allowed;
}

.anp-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.55rem 1rem;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.4;
}

.anp-legend__item{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:24px;
  white-space:nowrap;
}

.anp-swatch{
  flex:none;
  width:18px;
  height:18px;
  border-radius:5px;
  border:1px solid var(--line-2);
}

.anp-swatch--profiles{
  background:var(--blue-100);
  border-color:var(--blue-300);
}

.anp-swatch--empty{
  background:var(--white);
}

.anp-swatch--selected{
  background:var(--blue-600);
  border-color:var(--blue-700);
}

/* ---------- KARTE + PROFILPANEL ---------- */
.anp-workspace{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(20rem,.82fr);
  gap:clamp(1rem,2.2vw,1.5rem);
  align-items:stretch;
}

.anp-map-card,
.anp-panel{
  height:52rem;
  height:clamp(46rem,78svh,54rem);
  min-width:0;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}

.anp-map-card{
  display:flex;
  flex-direction:column;
}

.anp-map-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  min-height:66px;
  padding:.75rem 1rem;
  border-bottom:1px solid var(--line);
  background:var(--white);
}

.anp-map-hint{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:0;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.4;
}

.anp-map-hint svg{
  flex:none;
  width:19px;
  height:19px;
  color:var(--blue-600);
}

/* Sprunglink ueber die Karte. Die 45 Gemeinden sind 45 Tabstopps; ohne Ausweg muss sich
   jemand, der mit der Tastatur zum Panel will, durch alle durchtippen.
   Unsichtbar bis zum Fokus — dann steht er als normaler Knopf in der Leiste.
   Ziel ist #profile-panel-content, das traegt tabindex="0" und nimmt den Fokus wirklich an. */
.anp-skipmap{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.anp-skipmap:focus{
  position:static;
  width:auto;
  height:auto;
  overflow:visible;
  clip-path:none;
  flex:none;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.55rem .9rem;
  color:var(--white);
  font-size:.82rem;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  background:var(--navy);
  border-radius:var(--r-full);
  outline:2px solid var(--blue-600);
  outline-offset:2px;
}

.anp-reset{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  min-width:44px;
  min-height:44px;
  padding:.55rem .8rem;
  color:var(--navy);
  font-size:.82rem;
  font-weight:700;
  line-height:1.2;
  background:var(--white);
  border:1px solid var(--line-2);
  border-radius:var(--r-full);
  cursor:pointer;
  transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}

.anp-reset svg{
  width:16px;
  height:16px;
}

.anp-reset:hover{
  color:var(--blue-700);
  background:var(--blue-50);
  border-color:var(--blue-300);
  transform:translateY(-1px);
}

.anp-reset:focus-visible{
  outline:2px solid var(--blue-600);
  outline-offset:2px;
}

.anp-reset:disabled{
  color:var(--muted-2);
  background:var(--paper);
  border-color:var(--line);
  cursor:default;
  transform:none;
}

/* Die ruhige, hochformatige Silhouette ist das Signaturelement der Seite. */
.anp-map{
  position:relative;
  z-index:0;
  flex:1 1 auto;
  width:100%;
  min-height:34rem;
  overflow:hidden;
  background:linear-gradient(180deg,var(--blue-50),var(--paper));
  font-family:var(--font);
  isolation:isolate;
}

.anp-map:focus-visible{
  outline:3px solid var(--blue-600);
  outline-offset:-3px;
}

.anp-source{
  flex:none;
  padding:.58rem 1rem;
  color:var(--muted);
  font-size:.68rem;
  line-height:1.45;
  background:var(--white);
  border-top:1px solid var(--line);
}

.anp-source a{
  color:var(--blue-600);
  text-decoration:underline;
  text-underline-offset:2px;
}

.anp-source a:hover{
  color:var(--blue-700);
}

/* ---------- LEAFLET, AUF DIE ANPACKEN-KARTE BEGRENZT ---------- */
.anp-map.leaflet-container{
  color:var(--text);
  background:linear-gradient(180deg,var(--blue-50),var(--paper));
  cursor:default;
}

.anp-map .leaflet-pane,
.anp-map .leaflet-control{
  font-family:var(--font);
}

.anp-map .leaflet-overlay-pane svg{
  overflow:visible;
}

.anp-map .leaflet-interactive{
  cursor:pointer;
  transition:fill .18s var(--ease),stroke .18s var(--ease),stroke-width .18s var(--ease),filter .18s var(--ease);
}

.anp-map .anp-municipality{
  vector-effect:non-scaling-stroke;
}

.anp-map .anp-municipality--empty{
  fill:var(--white);
  stroke:var(--line-2);
}

.anp-map .anp-municipality--profiles{
  fill:var(--blue-100);
  stroke:var(--blue-300);
}

/* Fuellung markiert AUSWAHL (und den Ueberfahr-Vorgeschmack darauf) — nicht Fokus.
   Der Fokus hat seine eigene Anzeige darunter, sonst waeren beide Zustaende dieselbe
   Farbe und beim Durchtabben saehe jede Gemeinde aus wie ausgewaehlt. */
.anp-map .anp-municipality--empty:hover,
.anp-map .anp-municipality--profiles:hover,
.anp-map .anp-municipality--empty.is-selected,
.anp-map .anp-municipality--profiles.is-selected{
  fill:var(--blue-600);
  stroke:var(--navy);
  stroke-width:3px;
  filter:drop-shadow(0 3px 2px var(--blue-300));
}

/* Fokusanzeige (SC 1.4.11). Reihenfolge ist tragend: :focus-visible steht NACH :focus,
   sonst loescht die Nullregel darueber den Ring wieder.
   Der Rahmen folgt der Bounding-Box des Pfads, nicht der Gemeindeform — genau deshalb
   ist er von der Auswahl-Faerbung eindeutig zu unterscheiden.
   Navy #0E2148 gegen die hellen Nachbarflaechen: 13,6:1 (blue-100) bis 15,8:1 (weiss).
   Der Pane traegt overflow:visible, der Ring wird also nicht abgeschnitten. */
.anp-map .leaflet-interactive:focus{
  outline:none;
}

.anp-map .leaflet-interactive:focus-visible{
  outline:3px solid var(--navy);
  outline-offset:2px;
}

.anp-map .leaflet-control-zoom{
  margin:12px;
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-sm);
}

.anp-map .leaflet-control-zoom a{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  color:var(--navy);
  font-family:var(--font);
  font-size:1.2rem;
  font-weight:600;
  line-height:1;
  background:var(--white);
  border-bottom:1px solid var(--line);
  transition:color .2s var(--ease),background .2s var(--ease);
}

.anp-map .leaflet-control-zoom a:last-child{
  border-bottom:0;
}

.anp-map .leaflet-control-zoom a:hover,
.anp-map .leaflet-control-zoom a:focus-visible{
  color:var(--blue-700);
  background:var(--blue-50);
}

.anp-map .leaflet-control-zoom a:focus-visible{
  position:relative;
  z-index:1;
  outline:2px solid var(--blue-600);
  outline-offset:-3px;
}

.anp-map .leaflet-control-zoom a.leaflet-disabled{
  color:var(--muted-2);
  background:var(--paper);
  cursor:default;
}

.anp-map .leaflet-bottom.leaflet-right{
  max-width:calc(100% - 1rem);
}

.anp-map .leaflet-control-attribution{
  max-width:100%;
  margin:0 6px 6px 0;
  padding:.2rem .42rem;
  color:var(--muted);
  font-size:.62rem;
  line-height:1.35;
  white-space:normal;
  background:var(--white);
  border-radius:5px;
  box-shadow:var(--shadow-sm);
}

.anp-map .leaflet-control-attribution a{
  color:var(--blue-600);
  text-decoration:underline;
  text-underline-offset:2px;
}

.anp-map .leaflet-tooltip{
  padding:.48rem .65rem;
  color:var(--navy);
  font-family:var(--font);
  font-size:.78rem;
  font-weight:700;
  line-height:1.3;
  background:var(--white);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-md);
}

.anp-map .anp-map-tooltip{
  letter-spacing:0;
}

.anp-map .leaflet-tooltip::before{
  border-top-color:var(--line-2);
}

.anp-map .anp-count-marker{
  display:grid;
  place-items:center;
  background:transparent;
  border:0;
  pointer-events:none;
}

.anp-map .anp-count-badge{
  display:grid;
  place-items:center;
  min-width:26px;
  height:26px;
  padding:0 .35rem;
  color:var(--white);
  font-size:.72rem;
  font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
  background:var(--blue-600);
  border:2px solid var(--white);
  border-radius:var(--r-full);
  box-shadow:var(--shadow-md);
}

.anp-map[aria-busy="true"]{
  cursor:progress;
}

.anp-map--error{
  display:grid;
  place-items:center;
  padding:clamp(1.25rem,4vw,2.5rem);
  color:var(--muted);
  text-align:center;
  background:var(--white);
}

.anp-map--error .leaflet-pane,
.anp-map--error .leaflet-control-container{
  display:none;
}

/* ---------- AUSWAHL-/PROFILPANEL ---------- */
.anp-panel{
  display:flex;
  flex-direction:column;
}

.anp-panel__head{
  flex:none;
  min-height:120px;
  padding:1.25rem 1.35rem 1.2rem;
  color:var(--white);
  background:var(--navy);
  border-bottom:1px solid var(--navy-2);
}

.anp-panel__kicker{
  display:block;
  margin-bottom:.38rem;
  color:var(--blue-300);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.35;
  text-transform:uppercase;
}

.anp-panel__title{
  color:var(--white);
  font-size:clamp(1.35rem,2.2vw,1.75rem);
  line-height:1.12;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}

.anp-panel__meta{
  margin-top:.45rem;
  color:var(--blue-300);
  font-size:.84rem;
  line-height:1.45;
}

.anp-panel__body{
  flex:1 1 auto;
  min-height:0;
  padding:1rem;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-color:var(--blue-300) var(--blue-50);
  scrollbar-width:thin;
  background:var(--white);
}

.anp-panel__body:focus-visible{
  outline:3px solid var(--blue-600);
  outline-offset:-4px;
}

.anp-panel__body::-webkit-scrollbar{
  width:9px;
}

.anp-panel__body::-webkit-scrollbar-track{
  background:var(--blue-50);
}

.anp-panel__body::-webkit-scrollbar-thumb{
  background:var(--blue-300);
  border:2px solid var(--blue-50);
  border-radius:var(--r-full);
}

.anp-default,
.anp-empty{
  min-height:100%;
  padding:clamp(.25rem,1vw,.75rem);
}

.anp-default > svg,
.anp-empty > svg,
.anp-default__icon,
.anp-empty__icon{
  width:42px;
  height:42px;
  margin-bottom:1rem;
  padding:.6rem;
  color:var(--blue-600);
  background:var(--blue-50);
  border:1px solid var(--blue-100);
  border-radius:12px;
}

.anp-default h3,
.anp-empty h3,
.anp-default__title,
.anp-empty__title{
  margin-bottom:.55rem;
  color:var(--ink);
  font-size:1.12rem;
  line-height:1.25;
}

.anp-default p,
.anp-empty p,
.anp-default__text,
.anp-empty__text{
  color:var(--muted);
  font-size:.92rem;
  line-height:1.65;
}

.anp-default__lead{
  color:var(--text)!important;
  font-weight:500;
}

.anp-default__label{
  margin-top:1.15rem;
  color:var(--blue-600)!important;
  font-size:.68rem!important;
  font-weight:800;
  letter-spacing:.12em;
  line-height:1.35!important;
  text-transform:uppercase;
}

.anp-empty{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

.anp-empty__mark{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  margin-bottom:1rem;
  color:var(--blue-600);
  font-size:1.05rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  background:var(--blue-50);
  border:1px solid var(--blue-100);
  border-radius:50%;
}

.anp-empty__action{
  margin-top:1.15rem;
  padding:.78rem 1.15rem;
  font-size:.88rem;
}

.anp-place-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.55rem;
  margin-top:1.25rem;
}

.anp-place-button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.55rem;
  min-width:0;
  min-height:44px;
  padding:.55rem .58rem .55rem .72rem;
  color:var(--text);
  text-align:left;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}

.anp-place-button:hover{
  color:var(--blue-700);
  background:var(--blue-50);
  border-color:var(--blue-300);
  transform:translateY(-1px);
}

.anp-place-button:focus-visible{
  outline:2px solid var(--blue-600);
  outline-offset:2px;
}

.anp-place-button__name{
  min-width:0;
  overflow:hidden;
  font-size:.8rem;
  font-weight:700;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.anp-place-button__count{
  flex:none;
  display:grid;
  place-items:center;
  min-width:25px;
  height:25px;
  padding:0 .3rem;
  color:var(--blue-700);
  font-size:.7rem;
  font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
  background:var(--blue-100);
  border-radius:var(--r-full);
}

.anp-profile-list{
  display:grid;
  gap:.75rem;
}

.anp-profile{
  display:grid;
  grid-template-columns:6.25rem minmax(0,1fr);
  gap:.9rem;
  align-items:center;
  min-width:0;
  padding:.72rem;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}

.anp-profile__image{
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  object-fit:cover;
  object-position:center;
  background:var(--blue-50);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}

.anp-profile__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.anp-profile__info{
  min-width:0;
}

.anp-profile__position{
  display:block;
  margin-bottom:.22rem;
  color:var(--blue-600);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.1em;
  line-height:1.35;
  text-transform:uppercase;
}

.anp-profile__position:empty,
.anp-profile__role:empty{
  display:none;
}

.anp-profile__name{
  color:var(--ink);
  font-size:1.03rem;
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
}

.anp-profile__role{
  margin-top:.4rem;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.anp-noscript{
  margin-top:1rem;
  padding:1rem 1.1rem;
  color:var(--navy);
  font-size:.9rem;
  line-height:1.55;
  background:var(--blue-50);
  border:1px solid var(--blue-100);
  border-radius:var(--r-sm);
}

.anp-noscript .btn{
  margin-top:1rem;
}

.anp-visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

[hidden].anp-default,
[hidden].anp-empty,
[hidden].anp-profile-list{
  display:none!important;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .anp-workspace{
    grid-template-columns:1fr;
  }

  .anp-map-card,
  .anp-panel{
    height:auto;
  }

  .anp-map{
    flex:none;
    min-height:0;
    height:40rem;
  }

  .anp-panel__body{
    flex:none;
    min-height:0;
    overflow:visible;
    overscroll-behavior:auto;
  }

  .anp-default,
  .anp-empty{
    min-height:0;
  }

  .anp-profile-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:680px){
  .anp-controls{
    align-items:stretch;
    flex-direction:column;
    padding:.9rem;
  }

  .anp-select-wrap{
    min-width:0;
    width:100%;
  }

  .anp-legend{
    justify-content:flex-start;
  }

  .anp-map{
    height:35rem;
  }

  .anp-profile-list{
    grid-template-columns:1fr;
  }
}

@media(max-width:480px){
  .anp-map-card,
  .anp-panel{
    border-radius:var(--r-md);
  }

  .anp-map-toolbar{
    align-items:stretch;
    flex-direction:column;
    min-height:0;
    padding:.72rem .75rem;
  }

  .anp-map-hint{
    font-size:.76rem;
  }

  .anp-reset{
    width:100%;
    padding:.55rem .75rem;
  }

  .anp-map{
    height:32rem;
  }

  .anp-source{
    padding:.55rem .75rem;
    font-size:.64rem;
  }

  .anp-panel__head{
    min-height:0;
    padding:1.1rem 1rem;
  }

  .anp-panel__body{
    padding:.75rem;
  }

  .anp-place-grid{
    grid-template-columns:1fr;
  }

  .anp-place-button__name{
    font-size:.84rem;
  }

  .anp-profile{
    grid-template-columns:5rem minmax(0,1fr);
    gap:.75rem;
    padding:.62rem;
  }
}

@media(max-width:340px){
  .anp-controls{
    padding:.75rem;
  }

  .anp-legend{
    display:grid;
    gap:.35rem;
  }

  .anp-map{
    height:29rem;
  }

  .anp-map-hint svg{
    display:none;
  }

  .anp-profile{
    grid-template-columns:4.5rem minmax(0,1fr);
    gap:.65rem;
  }

  .anp-profile__name{
    font-size:.96rem;
  }

  .anp-profile__role{
    font-size:.78rem;
  }
}

@media(pointer:coarse){
  .anp-place-button,
  .anp-reset,
  #municipality-select{
    min-height:48px;
  }

  .anp-map .leaflet-control-zoom a{
    width:44px;
    height:44px;
  }
}

@media(prefers-reduced-motion:reduce){
  #municipality-select,
  .anp-reset,
  .anp-place-button,
  .anp-map .leaflet-interactive,
  .anp-map .leaflet-control-zoom a{
    transition:none;
  }

  .anp-reset:hover,
  .anp-place-button:hover{
    transform:none;
  }
}