/* DeutschlandGourmet v2 — Bundesland-Karte (Leaflet + Cluster). Eckig, CD-Grün #5a6a2c.
   Popup/Pin/Cluster/Umkreis 1:1 aus dem abgenommenen Prototyp; plus Consent-Platzhalter. */

.dgmap-sec { margin-top: 2rem; }
.dgmap-sec > h2 { margin-bottom: .5rem; }
.dgmap-sec .dgmap-intro { color: #6f685a; margin: 0 0 1rem; font-size: .98rem; }

/* Kartenrahmen: eckig, aber weich eingebunden - hauchzarte Navi-Linie (#e7e3da) statt hartem
   schwarzem Border, dazu ein dezenter Schatten (angelehnt an das CD/die Navi). */
.dgmap-box { position: relative; border: 1px solid #e7e3da; background: #f6f4ec;
  box-shadow: 0 6px 22px -10px rgba(31, 30, 24, .20); }
.dgmap { width: 100%; height: min(60vh, 560px); }
/* Vollbild */
.dgmap-box.dgmap-fs { position: fixed; inset: 0; z-index: 9999; border: 0; box-shadow: none; }
.dgmap-box.dgmap-fs .dgmap { height: 100vh; }
.dgmap-fsclose { display: none; position: absolute; top: 14px; right: 14px; z-index: 10000;
  background: #fff; border: 1px solid #1f1e18; padding: .5rem .9rem; font-weight: 700; cursor: pointer; }
.dgmap-box.dgmap-fs .dgmap-fsclose { display: inline-flex; align-items: center; gap: .4rem; }

.dgmap-toolbar { display: flex; gap: .6rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }
.dgmap-btn { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 700; font-size: .92rem;
  padding: .6rem 1.05rem; border: 1px solid #5a6a2c; background: #fff; color: #5a6a2c; transition: .15s; }
.dgmap-btn:hover { background: #1f1e18; color: #fff; border-color: #1f1e18; }   /* Hover schwarz bleibt */
.dgmap-btn svg { width: 1.05rem; height: 1.05rem; }
.dgmap-chk { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; cursor: pointer; user-select: none; }
.dgmap-chk input { width: 1.05rem; height: 1.05rem; accent-color: #5a6a2c; cursor: pointer; }
.dgmap-count { color: #6b6455; font-size: .9rem; margin-left: auto; }

/* Container-Mindesthöhe: Consent-Platzhalter und spätere Karte füllen dieselbe Höhe -> kein Layout-Sprung.
   (Die .dgmap-consent-Styles bringt dg-map-consent.js selbst mit.) */
/* Eigener Stacking-Context: haelt Leaflets interne z-index (Panes/Controls bis 1000) lokal,
   damit die eingebettete Karte beim Scrollen NIE die sticky Navigation (z-index 40) ueberdeckt.
   Der Vollbild-Modus (.dgmap-box.dgmap-fs, z-index 9999) liegt separat darueber und bleibt unberuehrt. */
#dgLandkarte { min-height: min(60vh, 560px); position: relative; z-index: 0; isolation: isolate; }

/* Marker-Punkt im CD-Grün */
.dg-pin { width: 14px; height: 14px; border-radius: 50%; background: #5a6a2c; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
/* Cluster-Bubbles grün, weisse Zahl */
.dg-clu { background: transparent; }
.dg-clu div { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-family: system-ui, sans-serif;
  background: #5a6a2c; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.dg-clu.s div { font-size: 12px; } .dg-clu.m div { font-size: 13px; } .dg-clu.l div { font-size: 14px; }
/* km-Umkreis-Overlay */
.dg-radius { background: rgba(255,255,255,.93); border: 1px solid rgba(0,0,0,.14); padding: 4px 9px;
  font-size: .78rem; font-weight: 600; color: #1f1e18; box-shadow: 0 1px 5px rgba(0,0,0,.16); }

/* Popup — kompakt, clean, Foto oben */
.leaflet-popup-content-wrapper { border-radius: 3px; padding: 0; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,.22); }
.leaflet-popup-content { margin: 0; width: 212px !important; }
.leaflet-popup-tip { box-shadow: 0 8px 28px rgba(0,0,0,.22); }
.leaflet-popup-close-button { top: 6px !important; right: 6px !important; width: 22px; height: 22px; line-height: 20px !important;
  background: rgba(255,255,255,.92) !important; color: #1f1e18 !important; border-radius: 50%; font-size: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.dg-pop { font-family: system-ui, -apple-system, Segoe UI, sans-serif; color: #1f1e18; }
/* translateZ(0) + backface-visibility: eigener GPU-Layer -> das Popup positioniert sich per
   translate3d auf Subpixel, was das Foto sonst unscharf rendert. So bleibt es gestochen scharf. */
.dg-pop .ph { display: block; width: 100%; height: 116px; object-fit: cover; background: #e9e5da;
  transform: translateZ(0); backface-visibility: hidden; }
.dg-pop .bd { padding: 9px 11px 11px; }
.dg-pop .nm { display: block; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: .9rem;
  line-height: 1.2; letter-spacing: -.01em; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-pop .nm:hover { text-decoration: underline; }
.dg-pop .lo { font-size: .72rem; color: #8a8474; margin-top: 1px; }
.dg-pop .rt { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: .72rem; color: #6b6455; }
.dg-pop .rt .st { color: #f7b500; letter-spacing: .5px; font-size: .78rem; }
.dg-pop .noev { font-size: .7rem; color: #a49c8c; margin-top: 6px; }
.dg-pop .go { display: inline-block; margin-top: 9px; font-size: .72rem; font-weight: 700; color: #5a6a2c; text-decoration: none; letter-spacing: .01em; }
.dg-pop .go:hover { text-decoration: underline; }
@media (max-width: 640px) { .dgmap-count { margin-left: 0; } }