/* ============================================================
   FORK & FIRE — Liefergebiets-Karte
   ============================================================ */

.cmap{ background:var(--ink); color:#fff; padding-block:var(--sec); }
.cmap__head{ max-width:min(60ch,62%); margin-bottom:var(--flow-lg); }

.map{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--gut); align-items:start;
}
.map__stage{ min-height:420px;
  position:relative; grid-column:1; grid-row:1 / span 3;
  /* ponytail: max-width pflicht. aspect-ratio + min-height leitet sonst die
     Breite aus der Mindesthoehe ab (420*1.78=748px) und sprengt die Grid-Spalte,
     sobald das Fenster schmaler als ~1500px ist. */
  aspect-ratio:1.78; max-width:100%; overflow:hidden;
  border:1px solid var(--line-l); background:
    radial-gradient(120% 90% at 72% 34%, rgba(211,1,15,.07), transparent 62%),
    #0E0E11;
}
.map__svg{ display:block; width:100%; height:100%; }

/* Bundesländer */
.map__state{
  fill:rgba(255,255,255,.035); stroke:rgba(255,255,255,.22); stroke-width:.7;
  vector-effect:non-scaling-stroke;
  cursor:pointer; outline:none;
  transition:fill .45s var(--ease), stroke .45s var(--ease), opacity .5s var(--ease);
}
.map__state[data-zone="kern"]{ fill:rgba(211,1,15,.16); stroke:rgba(211,1,15,.55); }
.map__state[data-zone="erweitert"]{ fill:rgba(255,255,255,.06); }
.map__state:hover{ fill:rgba(255,255,255,.14); stroke:rgba(255,255,255,.5); }
.map__state[data-zone="kern"]:hover{ fill:rgba(211,1,15,.3); stroke:var(--red); }
.map__state:focus-visible{ stroke:#fff; stroke-width:1.2; }
.map__state.is-on{ fill:rgba(211,1,15,.10); stroke:var(--red); stroke-width:1.2; }
.map__state.is-off{ opacity:.22; }

/* Bezirke */
.map__bezgroup{ opacity:0; pointer-events:none; transition:opacity .6s var(--ease) .25s; }
.map__bezgroup.is-on{ opacity:1; pointer-events:auto; }
.map__bezpath{
  fill:transparent; stroke:rgba(255,255,255,.38); stroke-width:.5; vector-effect:non-scaling-stroke;
  transition:fill .3s var(--ease);
}
.map__bezpath:hover{ fill:rgba(255,255,255,.12); }

/* Radien */
.map__ring{ fill:none; stroke:rgba(255,255,255,.14); stroke-width:.5; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }
.map__ringlabel{
  fill:rgba(255,255,255,.34); font-family:var(--sans); font-size:6px;
  letter-spacing:.14em; text-anchor:middle; text-transform:uppercase;
}
.is-zoomed .map__rings{ opacity:0; transition:opacity .4s var(--ease); }
.map__rings{ transition:opacity .5s var(--ease); }

/* Basis */
.map__basehalo{ fill:rgba(211,1,15,.28); }
.map__basedot{ fill:var(--red); }
.map__baselabel{
  fill:#fff; font-family:var(--sans); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
}

/* Städte */
.map__city circle{ fill:rgba(255,255,255,.62); }
.map__city.is-cap circle{ fill:#fff; }
.map__city text{
  fill:rgba(255,255,255,.85); font-family:var(--sans); font-weight:500; letter-spacing:.04em;
  paint-order:stroke; stroke:rgba(11,11,12,.75); stroke-width:2px; stroke-linejoin:round;
}
.map__city.is-cap text{ fill:#fff; font-weight:500; }

/* Länder-Namen */
.map__label{
  fill:rgba(255,255,255,.5); font-family:var(--sans); font-size:8px;
  letter-spacing:.16em; text-transform:uppercase; text-anchor:middle;
  pointer-events:none; transition:opacity .4s var(--ease);
  paint-order:stroke; stroke:rgba(11,11,12,.5); stroke-width:2.5px; stroke-linejoin:round;
}
.map__label.is-hidden{ opacity:0; }

/* Zurück */
.map__back{
  position:absolute; left:14px; top:14px; z-index:3;
  background:rgba(11,11,12,.72); border:1px solid var(--line-l); color:#fff;
  padding:.72em 1.1em; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease), border-color .4s var(--ease);
  backdrop-filter:blur(6px);
}
.map__back::before{ content:"←"; margin-right:.7em; color:var(--red); }
.is-zoomed .map__back{ opacity:1; pointer-events:auto; }
.map__back:hover{ border-color:var(--red); }

/* Legende */
.map__legend{
  grid-column:2; display:flex; flex-wrap:wrap; gap:6px 20px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-l);
}
.map__legend li{ display:flex; align-items:center; gap:.7em; }
.map__legend i{ width:14px; height:14px; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.035); }
.map__legend li[data-zone="kern"] i{ background:rgba(211,1,15,.3); border-color:var(--red); }
.map__legend li[data-zone="erweitert"] i{ background:rgba(255,255,255,.09); }

/* Chips */
.map__chips{ grid-column:2; display:flex; flex-wrap:wrap; gap:8px; }
.map__chips button{
  background:transparent; border:1px solid var(--line-l); color:rgba(255,255,255,.8);
  padding:.72em 1.05em; font-size:11px; letter-spacing:.12em; cursor:pointer;
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.map__chips button:hover{ border-color:rgba(255,255,255,.5); color:#fff; }
.map__chips button[data-zone="kern"]{ border-color:rgba(211,1,15,.5); }
.map__chips button.is-on{ background:var(--red); border-color:var(--red); color:#fff; }
.map__chips button.is-all{ border-color:rgba(255,255,255,.35); }

/* Panel */
.map__panel{ grid-column:2; border-top:1px solid var(--line-l); padding-top:var(--flow); }
.map__eyebrow{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-l);
}
.map__eyebrow[data-zone="kern"]{ color:var(--red); }
.map__title{
  font-family:var(--serif); font-weight:480; font-size:clamp(1.6rem,2.6vw,2.5rem);
  line-height:1.08; margin:.4em 0 .5em;
}
.map__lead{ color:rgba(255,255,255,.72); font-size:.96rem; max-width:44ch; }
.map__facts{ margin-top:var(--flow); border-top:1px solid var(--line-l); }
.map__facts > div{
  display:flex; justify-content:space-between; gap:16px;
  padding:.72em 0; border-bottom:1px solid rgba(255,255,255,.09);
}
.map__facts dt{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-l); padding-top:.3em; }
.map__facts dd{ margin:0; text-align:right; font-size:.98rem; font-variant-numeric:tabular-nums; }
.map__cityline{ margin-top:var(--flow); display:flex; flex-wrap:wrap; gap:6px; }
.map__cityline li{
  display:flex; align-items:baseline; gap:.55em; border:1px solid var(--line-l);
  padding:.5em .8em; font-size:12px;
}
.map__cityline s{ text-decoration:none; color:var(--muted-l); font-variant-numeric:tabular-nums; font-size:11px; }
.map__note{ margin-top:var(--flow); font-size:11.5px; line-height:1.6; color:rgba(255,255,255,.64); max-width:46ch; }
.map__cta{
  display:inline-block; margin-top:var(--flow); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; border-bottom:1px solid var(--red); padding-bottom:.4em;
  transition:color .35s var(--ease);
}
.map__cta:hover{ color:var(--red); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:1080px){
  .cmap__head{ max-width:60ch; }
  .map{ grid-template-columns:1fr; }
  .map__stage{ min-height:420px; aspect-ratio:1.5; grid-column:1; grid-row:auto; }
  .map__legend,.map__chips,.map__panel{ grid-column:1; }
  .map__chips{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; scrollbar-width:none; }
  .map__chips::-webkit-scrollbar{ display:none; }
  .map__chips button{ white-space:nowrap; padding:.85em 1.15em; }
}
@media (max-width:900px){
  .map__stage{ min-height:420px; aspect-ratio:4/5; }
}
@media (max-width:640px){
  .map__label{ font-size:11px; letter-spacing:.1em; }
  .map__ringlabel{ font-size:9px; }
  .map__facts dd{ font-size:.94rem; }
}

/* Karte laeuft beim Scrollen mit, solange rechts die laengere Spalte steht.
   Nur zweispaltig sinnvoll; einspaltig steht die Karte ohnehin oben. */
@media (min-width:1081px){
  .map__stage{ position:sticky; top:calc(var(--hdr-h) + 18px); align-self:start; }
}