/* Nie wieder Vizekusen — Kartenseite. Design-Tokens & Layout 1:1 aus der Referenz. */
:root{
  --ink:#1a1712; --paper:#f0ece1; --paper2:#e7e1d2; --accent:#a23f2e; --line:#cfc7b4;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:'Space Mono',ui-monospace,monospace;background:var(--paper);color:var(--ink)}
.nwv-map-page h1,.nwv-map-page h2,.nwv-map-page h3,.nwv-map-page .disp{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:0.5px}
.nwv-map-page a{color:var(--accent)}
.nwv-map-page a:hover{color:var(--ink)}
#map{position:fixed;inset:0;background:var(--paper)}
.leaflet-tile{filter:grayscale(0.55) sepia(0.18) brightness(0.99) contrast(1.04) saturate(0.85)}
.leaflet-container{background:var(--paper)}

/* header */
header.nwv-header{position:fixed;top:16px;left:16px;z-index:1000;background:var(--paper);border:2px solid var(--ink);
  border-radius:4px;padding:14px 16px;max-width:320px}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{flex-shrink:0}
header.nwv-header h1{margin:0;font-size:26px;line-height:0.92;font-weight:700}
header.nwv-header h1 .de{color:var(--accent)}
header.nwv-header p{margin:10px 0 0;font-size:11.5px;line-height:1.55;opacity:0.8;text-transform:none;font-family:'Space Mono',monospace}
.legend{margin-top:12px;border-top:2px solid var(--ink);padding-top:10px;display:flex;flex-direction:column;gap:7px}
.legend div{display:flex;align-items:center;gap:9px;font-size:10.5px;line-height:1.2}
.lg{width:22px;height:22px;flex-shrink:0;display:grid;place-items:center;border:2px solid var(--ink);
  border-radius:50%;background:var(--paper);font-size:10px;font-weight:700;font-family:'Space Mono',monospace}
.lg.dia{border-radius:3px;transform:rotate(45deg);width:18px;height:18px}
.lg.home{background:var(--accent);color:var(--paper)}

/* top-right controls */
.controls{position:fixed;top:16px;right:16px;z-index:1000;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.ctl-row{display:flex;gap:8px}
.controls button, .controls a{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:0.5px;
  font-size:12px;font-weight:600;padding:8px 13px;border:2px solid var(--ink);border-radius:4px;
  background:var(--paper);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.controls button:hover, .controls a:hover{background:var(--ink);color:var(--paper)}
.controls button.active{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.controls select{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:0.5px;font-size:12px;
  font-weight:600;padding:8px 13px;border:2px solid var(--ink);border-radius:4px;background:var(--paper);color:var(--ink);cursor:pointer}
.scope{border:2px solid var(--ink);border-radius:4px;overflow:hidden;display:flex}
.scope button{border:0;border-radius:0;border-left:2px solid var(--ink)}
.scope button:first-child{border-left:0}

/* dialog */
dialog#impressum{border:2px solid var(--ink);border-radius:4px;background:var(--paper);color:var(--ink);
  font-family:'Space Mono',monospace;max-width:440px;padding:28px 32px}
dialog#impressum::backdrop{background:rgba(26,23,18,0.5)}
dialog#impressum h2{margin:0 0 16px;font-size:20px}
dialog#impressum p{font-size:12px;line-height:1.7;margin:0 0 12px}
dialog#impressum .close{position:absolute;top:10px;right:10px;width:32px;height:32px;border:2px solid var(--ink);
  border-radius:4px;background:var(--paper);color:var(--ink);font-family:inherit;font-size:15px;cursor:pointer}
dialog#impressum .close:hover{background:var(--ink);color:var(--paper)}

/* markers — kompakt gehalten, damit es bei vielen Spielen nah beieinander
   nicht überladen wirkt */
.pin{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--paper);border:2px solid var(--ink);font-size:11px;font-weight:700;
  font-family:'Space Mono',monospace;color:var(--ink);transition:transform .15s;cursor:pointer}
.pin:hover{transform:scale(1.15)}
.pin.pod::after{content:'';position:absolute;right:-2px;top:-2px;width:10px;height:10px;border-radius:50%;
  background:var(--accent);border:1.5px solid var(--paper)}
.pin .link-badge{position:absolute;right:-4px;top:-4px;width:13px;height:13px;border-radius:3px;
  background:var(--paper);border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center}
.pin .link-badge svg{width:7px;height:7px}
.pin.dia{border-radius:4px;transform:rotate(45deg)}
.pin.dia:hover{transform:rotate(45deg) scale(1.15)}
.pin.dia .lbl{transform:rotate(-45deg);display:block}
.pin.cup{border-radius:10px}
.pin.test{border-radius:0}
.pin.home{width:36px;height:36px;background:var(--accent);color:var(--paper);border-color:var(--ink);font-size:13px}
.pin.home:hover{transform:scale(1.12)}
.pin.hq{width:32px;height:32px;border-radius:6px;color:var(--accent);font-size:11px;font-weight:700;position:relative}
.lg.hq{border-radius:5px;color:var(--accent);font-size:9px}
.lg.cup{border-radius:9px}
.lg.test{border-radius:0}

/* Ergebnis (monochrom, kein Ampelschema — siehe Design-Tokens): Sieg = voll
   eingefärbt, Remis = gestrichelter Rand, Niederlage = gepunkteter Rand + reduzierte Deckkraft. */
.pin.sieg{background:var(--ink);color:var(--paper)}
.pin.remis{border-style:dashed}
.pin.niederlage{border-style:dotted;opacity:0.68}
.lg.sieg{background:var(--ink);color:var(--paper)}
.lg.remis{border-style:dashed}
.lg.niederlage{border-style:dotted;opacity:0.68}

/* "Bereits geöffnet"-Indikator (nur Sitzung) — separat vom Ergebnis-Fill,
   damit sich beide Zustände nicht überlagern. */
.pin.read::before{content:'';position:absolute;left:-2px;bottom:-2px;width:8px;height:8px;border-radius:50%;
  background:var(--ink);border:1.5px solid var(--paper)}
.pin.sieg.read::before{background:var(--paper);border-color:var(--ink)}

/* popup */
.leaflet-popup-content-wrapper{border-radius:4px;background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);box-shadow:none;font-family:'Space Mono',monospace}
.leaflet-popup-tip{background:var(--ink);box-shadow:none}
.leaflet-popup-content{margin:0;width:250px !important}
.pop{display:flex;flex-direction:column}
.pop img{width:100%;height:120px;object-fit:cover;display:block;border-bottom:2px solid var(--ink)}
.pop .body{padding:11px 13px 13px;display:flex;flex-direction:column;gap:6px}
.pop .kicker{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);font-weight:700}
.pop .tag{align-self:flex-start;font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:700;
  border:1.5px solid var(--ink);border-radius:3px;padding:3px 7px}
.pop .tag.ext{background:var(--ink);color:var(--paper)}
.pop h3{margin:0;font-size:17px;line-height:1.05;font-weight:700}
.pop .st{font-family:'Space Mono',monospace;font-size:10.5px;opacity:0.65;text-transform:none;letter-spacing:0;margin-top:2px}
.pop p{margin:0;font-size:11px;line-height:1.5;opacity:0.82}
.pop button{align-self:flex-start;margin-top:4px;font-family:'Oswald',sans-serif;text-transform:uppercase;
  letter-spacing:0.5px;font-size:11px;font-weight:600;padding:7px 11px;border:2px solid var(--ink);
  border-radius:4px;background:var(--ink);color:var(--paper);cursor:pointer}
.pop button:hover{background:var(--accent);border-color:var(--accent)}
/* base camp popup */
.basepop{width:250px}
.basepop .head{padding:12px 13px;border-bottom:2px solid var(--ink);background:var(--paper2)}
.basepop .kicker{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);font-weight:700}
.basepop h3{margin:2px 0 0;font-size:19px;font-weight:700;font-family:'Oswald';text-transform:uppercase}
.basepop .sub{font-size:10.5px;opacity:0.7;margin-top:3px}
.basepop .games{max-height:230px;overflow-y:auto}
.basepop .g{display:flex;align-items:center;gap:9px;padding:8px 13px;border-bottom:1px solid var(--line);cursor:pointer}
.basepop .g:last-child{border-bottom:0}
.basepop .g:hover{background:var(--paper2)}
.basepop .g .num{flex-shrink:0;width:34px;font-family:'Oswald';font-weight:700;font-size:13px}
.basepop .g .opp{font-size:11px;line-height:1.15;flex:1}
.basepop .g .opp small{display:block;font-size:9px;opacity:0.6;letter-spacing:1px;text-transform:uppercase}
.basepop .g .tag{flex-shrink:0;font-size:8.5px;letter-spacing:1px;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:3px;padding:2px 5px}
.basepop .g .tag.pod{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.basepop .g .tag.ext{background:var(--paper2)}

/* article panel */
#panel{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);z-index:1100;background:var(--paper);
  border-left:2px solid var(--ink);transform:translateX(105%);transition:transform .3s ease;
  display:flex;flex-direction:column}
#panel.open{transform:translateX(0)}
#panel .close{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border:2px solid var(--ink);
  border-radius:4px;background:var(--paper);color:var(--ink);font-family:inherit;font-size:17px;cursor:pointer}
#panel .close:hover{background:var(--ink);color:var(--paper)}
#panel .scroll{overflow-y:auto;flex:1}
#panel img.hero{width:100%;height:230px;object-fit:cover;display:block;border-bottom:2px solid var(--ink)}
#panel .hero-video{display:block;position:relative;width:100%;height:0;padding-top:56.25%;border-bottom:2px solid var(--ink);background:var(--ink)}
#panel .hero-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block}
#panel .content{padding:24px 30px 40px}
#panel .kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:6px;font-weight:700}
#panel h2{margin:0 0 8px;font-size:34px;line-height:0.98;font-weight:700}
#panel .meta{font-size:11px;opacity:0.62;margin-bottom:20px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#panel .meta .badge{border:1.5px solid var(--ink);border-radius:3px;padding:2px 7px;letter-spacing:1px;text-transform:uppercase;font-size:9.5px;opacity:1}
#panel .player{border:2px solid var(--ink);border-radius:4px;display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:22px;background:var(--paper2)}
#panel .player .play{flex-shrink:0;width:42px;height:42px;border-radius:50%;border:2px solid var(--ink);background:var(--accent);
  display:grid;place-items:center;cursor:pointer;border:none}
#panel .player .play:hover{background:var(--ink)}
#panel .player .wave{flex:1;display:flex;align-items:center;gap:2px;height:30px}
#panel .player .wave i{flex:1;background:var(--ink);opacity:0.55;border-radius:1px}
#panel .player .dur{flex-shrink:0;font-size:11px;opacity:0.7}
#panel .text p{font-size:13px;line-height:1.75;margin:0 0 14px;text-wrap:pretty}
#panel .text p:first-child::first-letter{font-family:'Oswald';font-weight:700;font-size:52px;line-height:0.8;float:left;margin:4px 10px 0 0;color:var(--accent)}
#panel .text .nwv-fnref a{color:var(--accent);font-weight:700;text-decoration:none}
#panel .text .nwv-footnotes{margin-top:24px;border-top:2px solid var(--ink);padding-top:14px}
#panel .text .nwv-footnotes-h{font-family:'Oswald';text-transform:uppercase;letter-spacing:0.5px;font-weight:700;font-size:13px;margin-bottom:8px}
#panel .text .nwv-footnotes ol{margin:0;padding-left:18px}
#panel .text .nwv-footnotes li{font-size:11.5px;line-height:1.6;margin-bottom:6px}
#panel .text .nwv-fn-back{color:var(--accent);text-decoration:none;margin-left:4px}
#panel .text .nwv-quellen{margin-top:24px;border-top:2px solid var(--ink);padding-top:14px}
#panel .text .nwv-quellen-h{font-family:'Oswald';text-transform:uppercase;letter-spacing:0.5px;font-weight:700;font-size:13px;margin-bottom:8px}
#panel .text .nwv-quellen-list{margin:0;padding:0;list-style:none}
#panel .text .nwv-quellen-list li{font-size:11.5px;line-height:1.6;margin-bottom:6px}
#panel .text .nwv-quelle-num{color:var(--accent);font-weight:700;margin-right:4px}
#panel .text .nwv-quellen-list a{color:inherit}
#panel .text .nwv-annotation{border-bottom:2px dotted var(--accent);cursor:pointer}
#panel .text .nwv-annotation:hover{background:var(--paper2)}

/* Rand-Kommentar-Popup ([notiz]-Shortcode) — an <body> angehängt, daher
   nicht unter #panel/.wrap verschachtelt. */
.nwv-note-popup{position:fixed;z-index:2000;width:min(260px,calc(100vw - 20px));background:var(--paper);
  border:2px solid var(--ink);border-radius:4px;padding:12px 32px 12px 14px;font-size:12px;line-height:1.6;
  font-family:'Space Mono',monospace;color:var(--ink)}
.nwv-note-popup .nwv-note-close{position:absolute;top:6px;right:6px;width:22px;height:22px;border:2px solid var(--ink);
  border-radius:3px;background:var(--paper);color:var(--ink);font-family:inherit;font-size:12px;cursor:pointer;line-height:1}
.nwv-note-popup .nwv-note-close:hover{background:var(--ink);color:var(--paper)}
#panel .full-link{display:inline-flex;align-items:center;gap:6px;margin-top:20px;padding:10px 16px;
  border:2px solid var(--ink);border-radius:4px;background:var(--paper);color:var(--ink);text-decoration:none;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:0.5px;font-size:12px;font-weight:600}
#panel .full-link:hover{background:var(--ink);color:var(--paper)}
#panel .gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0 4px}
#panel .gallery img{width:100%;height:110px;object-fit:cover;border:2px solid var(--ink);border-radius:3px}
#panel .related{margin-top:28px;border-top:2px solid var(--ink);padding-top:16px}
#panel .related .rel-h{font-family:'Oswald';text-transform:uppercase;letter-spacing:0.5px;font-weight:700;font-size:14px;margin-bottom:10px}
#panel .related .rel-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:2px solid var(--ink);border-radius:4px;margin-bottom:8px;cursor:pointer;background:var(--paper)}
#panel .related .rel-row:hover{background:var(--paper2)}
#panel .related .rel-t{flex:1;font-size:12px;line-height:1.25}
#panel .related .rel-t small{display:block;font-size:9.5px;opacity:0.6;letter-spacing:0.5px;text-transform:uppercase;margin-top:3px}
#panel .related .rel-arrow{flex-shrink:0;font-size:15px}
#panel .nav{display:flex;justify-content:space-between;gap:10px;padding:14px 30px;border-top:2px solid var(--ink)}
#panel .nav button{font-family:'Oswald';text-transform:uppercase;letter-spacing:0.5px;font-weight:600;font-size:12px;
  padding:9px 13px;border:2px solid var(--ink);border-radius:4px;background:var(--paper);color:var(--ink);cursor:pointer}
#panel .nav button:hover{background:var(--ink);color:var(--paper)}

/* index list bottom-left */
#index{position:fixed;left:16px;bottom:16px;z-index:1000;background:var(--paper);border:2px solid var(--ink);
  border-radius:4px;font-size:12px;max-width:300px}
#index summary{cursor:pointer;padding:11px 15px;font-family:'Oswald';font-weight:700;text-transform:uppercase;
  letter-spacing:0.5px;font-size:14px;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px}
#index summary::-webkit-details-marker{display:none}
#index summary .chev{transition:transform .2s}
#index[open] summary .chev{transform:rotate(90deg)}
#index .list{max-height:min(48vh, calc(100vh - 390px), 420px);overflow-y:auto;border-top:2px solid var(--ink)}
#index .row{display:flex;align-items:center;gap:10px;padding:8px 15px;cursor:pointer;border-bottom:1px solid var(--line)}
#index .row:last-child{border-bottom:0}
#index .row:hover{background:var(--paper2)}
#index .row .num{flex-shrink:0;width:38px;font-family:'Oswald';font-weight:700;font-size:13px}
#index .row .t{flex:1;line-height:1.2;font-size:11px}
#index .row .t small{display:block;font-size:9px;opacity:0.6;letter-spacing:0.5px;text-transform:uppercase}
#index .row .dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--ink)}
#index .row .dot.acc{background:var(--accent)}

.leaflet-control-attribution{font-family:'Space Mono',monospace;font-size:9px !important;background:rgba(240,236,225,0.85) !important}
.leaflet-bar a{background:var(--paper);color:var(--ink);border-color:var(--ink) !important}
.leaflet-bar a:hover{background:var(--ink);color:var(--paper)}
@media (max-width:680px){
  /* Header & Controls sind auf Desktop zwei unabhängig fixierte Boxen
     nebeneinander (oben links/rechts). Auf schmalen Screens reicht der
     Platz dafür nicht — sie werden daher aus dem Fixed-Layout gelöst und
     normal untereinander gestapelt, damit nichts mehr überlappt.
     position:relative statt static: behält den normalen Dokumentfluss
     (stapelt weiterhin sauber untereinander), erzeugt aber — anders als
     static — einen eigenen Stacking-Context. Ohne den setzen v. a. iOS-Safari
     & Co. Leaflets GPU-beschleunigte Kartenebenen (transform-basiert) beim
     Compositing über statischen Inhalt, unabhängig vom z-index. */
  /* top/left/right auf auto zurücksetzen: die Basis-Regeln oben setzen sie
     für den Desktop-Fixed-Modus (left:16px bzw. right:16px als Anker). Bei
     position:relative wirken diese Werte aber als Verschiebung von der
     normalen Fluss-Position aus, nicht als Anker — ohne Reset rutscht der
     Header zusätzlich nach rechts und die Controls nach links. */
  header.nwv-header{position:relative;top:auto;left:auto;max-width:none;margin:16px 16px 0}
  .legend{display:none}
  .controls{position:relative;top:auto;right:auto;margin:10px 16px 0;align-items:stretch}
  .ctl-row{flex-wrap:wrap}
  .controls select{flex:1;min-width:0}
  .scope{width:100%}
  .scope button{flex:1}
}

/* Kompatibilität mit der WP-Admin-Bar */
body.admin-bar #map{top:32px}
body.admin-bar header.nwv-header,
body.admin-bar .controls{top:calc(16px + 32px)}
@media screen and (max-width:782px){
  body.admin-bar #map{top:46px}
  body.admin-bar header.nwv-header,
  body.admin-bar .controls{top:calc(16px + 46px)}
}