/* Bezirke & Siedlungen auf der globalen Karte */
.dz__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dz__svg polygon { pointer-events: all; cursor: pointer; fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.55); stroke-width: 3; transition: fill .15s; }
.dz__d.t1 polygon { fill: rgba(143,209,79,.16); stroke: rgba(170,230,120,.75); }
.dz__d.t2 polygon { fill: rgba(242,193,78,.2); stroke: rgba(250,210,110,.85); }
.dz__d.t3 polygon { fill: rgba(232,57,43,.22); stroke: rgba(255,120,100,.9); }
.dz__svg polygon:hover { fill: rgba(255,255,255,.35); }
.dz__d.is-sel polygon { stroke: #fff; stroke-width: 5; }
.dz__svg polygon.is-sel { fill: rgba(255,122,26,.55); stroke: #fff; stroke-width: 8; }
.dz__svg polygon.is-burned { fill: rgba(30,20,15,.55); stroke-dasharray: 10 8; }
.dz__labels { position: absolute; inset: 0; pointer-events: none; }
.dz__lbl { position: absolute; transform: translate(-50%, -135%) scale(var(--dzs, 1)); transform-origin: 50% 100%; pointer-events: auto; border: 0; background: none; cursor: pointer; display: grid; justify-items: center; gap: 2px; text-shadow: 0 2px 10px rgba(0,0,0,.85); }
.dz__lbl b { font: 900 italic 40px/1 var(--display); text-transform: uppercase; color: #fff; letter-spacing: .02em; }
.dz__lbl span { font: 800 16px var(--display); letter-spacing: .2em; text-transform: uppercase; padding: 2px 8px 1px; border-radius: 4px; color: #16171a; }
.dz__lbl.t1 span { background: #9fd86a; } .dz__lbl.t2 span { background: #f2c14e; } .dz__lbl.t3 span { background: #ff7a5a; }
.dz__lbl:hover b { color: var(--sun-2); }
.dz__hq { position: absolute; transform: translate(-50%, -50%) scale(var(--dzs, 1)); pointer-events: auto; width: 54px; height: 44px; border: 0; padding: 0; cursor: pointer; background: none; }
.dz__hq img { width: 100%; height: 100%; object-fit: contain; filter: invert(1) drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.mapwrap.dz-off .dz__svg, .mapwrap.dz-off .dz__labels { display: none; }
.dz__toggle { display: grid; gap: 6px; justify-items: end; }
.dz__toggle button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(22,23,26,.88); color: #fff; cursor: pointer; font: 800 13px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.dz__toggle button span { width: 28px; height: 16px; border-radius: 8px; background: #3a3b41; position: relative; transition: .2s; }
.dz__toggle button span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: .2s; }
.dz__toggle button.is-on span { background: var(--sun); } .dz__toggle button.is-on span::after { left: 14px; }
.dz__legend { display: flex; gap: 6px; align-items: center; font: 700 11px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #e5e2db; background: rgba(22,23,26,.8); padding: 5px 8px; border-radius: 6px; }
.dz__legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.dz__legend .t1 { background: #9fd86a; } .dz__legend .t2 { background: #f2c14e; } .dz__legend .t3 { background: #ff7a5a; }
.mapwrap.dz-off .dz__legend { display: none; }

/* Panel rechts */
.dz__panel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 8; width: min(400px, 100%); background: rgba(18,19,22,.97); border-left: 1px solid var(--line); padding: 78px 22px 26px; overflow-y: auto;
  transform: translateX(102%); transition: transform .4s cubic-bezier(.2,.8,.2,1); box-shadow: -20px 0 60px rgba(0,0,0,.35); scrollbar-width: thin; }
.dz__panel.is-open { transform: none; }
.dz__panel h3 { font: 900 italic 36px/1 var(--display); text-transform: uppercase; margin: 10px 0 10px; }
.dz__panel p { color: #c9c6bf; font-size: 14px; }
.dz__x { position: absolute; right: 14px; top: 72px; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line); background: #222327; color: #fff; cursor: pointer; }
.dz__x:hover { background: var(--sun); color: var(--ink); }
.dz__back { border: 0; background: none; color: var(--sun); cursor: pointer; font: 800 13px var(--display); letter-spacing: .1em; text-transform: uppercase; padding: 0; display: block; margin-bottom: 10px; }
.dz__perk { border-left: 3px solid var(--gold); padding-left: 10px; color: #e9d9a8 !important; }
.dz__warn { color: #ffb3a8 !important; }
.dz__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0 18px; }
.dz__facts div { background: #1d1e22; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.dz__facts b { display: block; font: 900 italic 26px/1 var(--display); }
.dz__facts small { color: var(--mute); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.dz__panel .kicker { font-size: 12px; margin: 6px 0 10px; }
.dz__list { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 5px; color: #d9d6cf; font-size: 13.5px; }
.dz__small { font-size: 12.5px !important; color: var(--mute) !important; }
.dz__inl { width: 22px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: 6px; filter: invert(1); }
.dz__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.dz__chips button { border: 1px solid var(--line); background: #1d1e22; color: #e5e2db; border-radius: 6px; padding: 6px 10px 5px; cursor: pointer; font: 700 13px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.dz__chips button:hover { border-color: var(--sun); }
.dz__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; margin-bottom: 14px; }
.dz__grid button { border: 1px solid var(--line); background: #1d1e22; color: #cfccc5; border-radius: 6px; padding: 6px 0 5px; cursor: pointer; font: 700 13px var(--display); }
.dz__grid button:hover { border-color: var(--sun); color: #fff; }
.dz__grid button.is-burned { opacity: .45; text-decoration: line-through; }
.dz__thumb { width: 100%; border-radius: 10px; border: 1px solid var(--line); margin: 6px 0 12px; }
.dz__open { width: 100%; justify-content: center; margin-bottom: 18px; }

/* Siedlungsansicht */
.sv { position: fixed; inset: 0; z-index: 175; display: none; background: rgba(8,9,10,.75); backdrop-filter: blur(6px); }
.sv.is-open { display: block; animation: rtIn .3s; }
.sv__box { position: absolute; inset: 3vh 0; margin: 0 auto; width: min(1280px, calc(100% - 24px)); border-radius: 16px; background: var(--coal); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.sv__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 22px 12px; border-bottom: 1px solid var(--line); }
.sv__head .h2 { font-size: clamp(32px, 4vw, 52px); margin-top: 6px; }
.sv__x { position: static; flex: none; }
.sv__body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); }
.sv__mapwrap { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.sv__map { position: relative; aspect-ratio: 1; max-height: 100%; width: auto; margin: 0 auto; height: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #e8dac4; }
.sv__map > img { width: 100%; height: 100%; display: block; }
.sv__plot { position: absolute; border: 2px solid rgba(60,60,64,.75); background: rgba(255,255,255,.28); border-radius: 4px; cursor: pointer; display: grid; place-items: center; transition: background .15s, border-color .15s, transform .15s; padding: 0; }
.sv__plot b { font: 900 clamp(10px, 1.3vw, 16px) var(--display); color: #2a2b30; background: rgba(255,255,255,.85); border-radius: 4px; padding: 1px 5px 0; }
.sv__plot:hover { background: rgba(255,122,26,.3); border-color: var(--sun); }
.sv__plot.top1 { background: rgba(242,193,78,.55); border-color: #c99a1b; }
.sv__plot.top2 { background: rgba(200,205,215,.6); border-color: #8f96a3; }
.sv__plot.top3 { background: rgba(214,140,80,.5); border-color: #a8622c; }
.sv__plot.is-sel { border-color: var(--sun); border-width: 4px; background: rgba(255,122,26,.55); z-index: 2; }
.sv__pt { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; pointer-events: auto; z-index: 3; }
.sv__pt img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.sv__van { width: 42px; height: 42px; z-index: 4; }
.sv__van::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 3px solid var(--gold); animation: cmPulse 1.8s infinite; }
.sv__car img, .sv__def img { filter: invert(1) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); }
.sv__car { width: 34px; height: 20px; }
.sv__exit img { filter: invert(1) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); }
.sv__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; font-size: 12.5px; color: #cfccc5; }
.sv__legend span { display: inline-flex; align-items: center; gap: 6px; }
.sv__legend img { width: 22px; height: 22px; object-fit: contain; }
.sv__legend i.top1 { width: 14px; height: 14px; border-radius: 3px; background: #f2c14e; display: inline-block; }
.sv__side { border-left: 1px solid var(--line); padding: 16px 18px 22px; overflow-y: auto; scrollbar-width: thin; }
.sv__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #1d1e22; border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
.sv__seg button, .sv__chips button { border: 0; background: none; color: #cfccc5; border-radius: 6px; padding: 8px 0 7px; cursor: pointer; font: 800 14px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.sv__seg button.is-on { background: var(--sun); color: var(--ink); }
.sv__note { font-size: 12.5px; color: var(--mute); margin: 8px 0 14px; }
.sv__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sv__chips button { border: 1px solid var(--line); background: #1d1e22; padding: 7px 11px 6px; font-size: 13px; }
.sv__chips button.is-on { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.sv__detail { background: #1d1e22; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.sv__dh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.sv__dh b { font: 900 italic 24px var(--display); text-transform: uppercase; }
.sv__dh span { font-size: 12.5px; color: var(--sun-2); }
.sv__bar { display: grid; grid-template-columns: 118px 1fr 76px; gap: 8px; align-items: center; font-size: 12.5px; color: #bdbab3; margin-top: 6px; }
.sv__bar i { height: 7px; border-radius: 4px; background: #2c2d32; overflow: hidden; }
.sv__bar u { display: block; height: 100%; background: linear-gradient(90deg, var(--sun), var(--gold)); border-radius: 4px; text-decoration: none; }
.sv__bar em { font-style: normal; text-align: right; color: #fff; font-weight: 500; }
.sv__list { display: grid; gap: 4px; margin-bottom: 18px; max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.sv__row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: #1d1e22; cursor: pointer; }
.sv__row:hover { border-color: #5a5b62; }
.sv__row i { font: 900 italic 18px var(--display); color: var(--mute); font-style: normal; }
.sv__row.top1 i { color: #f2c14e; } .sv__row.top2 i { color: #c8cdd7; } .sv__row.top3 i { color: #d68c50; }
.sv__row b { font: 800 14px var(--display); text-transform: uppercase; display: block; }
.sv__row small { color: var(--mute); font-size: 11.5px; }
.sv__row em { font: 900 italic 20px var(--display); color: #fff; font-style: normal; }
.sv__row.is-sel { border-color: var(--sun); background: rgba(255,122,26,.1); }
@media (max-width: 900px) { .sv__body { grid-template-columns: 1fr; overflow-y: auto; } .sv__side { border-left: 0; border-top: 1px solid var(--line); overflow: visible; } .sv__map { height: auto; width: 100%; } }