:root{ --bg:#0b0d10; --panel:#14181d; --line:#232a31; --fg:#eef2f6; --muted:#9aa7b2; --accent:#e0b64d; }
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
header.hero{padding:64px 20px 40px;text-align:center;
  background:radial-gradient(120% 100% at 50% 0%,#1b2430 0%,var(--bg) 70%);
  border-bottom:1px solid var(--line)}
.hero h1{margin:0;font-size:clamp(28px,6vw,52px);letter-spacing:.5px;font-weight:700}
.hero p{margin:12px auto 0;color:var(--muted);font-size:clamp(14px,2.4vw,18px);max-width:760px}
.hero .count{margin-top:18px;display:inline-block;font-size:13px;color:var(--accent);
  border:1px solid var(--line);border-radius:999px;padding:5px 14px}
.hero .crumbs{margin:0 0 14px;font-size:13px;color:var(--muted)}
.hero .crumbs a{color:var(--muted);text-decoration:none}
.hero .crumbs a:hover{color:var(--accent)}
main{max-width:1400px;margin:0 auto;padding:32px 16px 80px}
.intro{max-width:860px;margin:0 auto 28px;text-align:center}
.intro h2{font-size:clamp(17px,3vw,22px);margin:0 0 10px;font-weight:600}
.intro p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
/* Filterleiste */
.filters{position:sticky;top:0;z-index:20;background:rgba(11,13,16,.94);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:12px;padding:12px;margin:0 0 8px;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filters input[type=search],.filters select{background:var(--panel);color:var(--fg);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:14px;min-width:0}
.filters input[type=search]{flex:1 1 180px}
.filters select{flex:0 1 auto;max-width:210px}
.filters .fcount{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
.filters button{background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;
  padding:8px 12px;font-size:13px;cursor:pointer}
.filters button:hover{color:var(--fg);border-color:var(--accent)}
section.year{margin-top:40px}
section.year h2{font-size:22px;margin:0 0 16px;padding-left:4px;
  border-left:3px solid var(--accent);line-height:1}
.grid{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;cursor:pointer;transition:transform .15s ease,border-color .15s ease}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.thumb{position:relative;aspect-ratio:16/9;background:#000}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.thumb::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 40%,rgba(0,0,0,.35) 100%)}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.play svg{width:52px;height:52px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));opacity:.9}
.card:hover .play svg{opacity:1}
.cap{padding:10px 12px 4px;font-size:14px;color:var(--fg);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sub{display:flex;align-items:center;gap:6px;padding:0 12px 10px;font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden}
.sub .loc{overflow:hidden;text-overflow:ellipsis}
.sub .zeit{margin-left:auto;flex:0 0 auto;color:var(--accent);border:1px solid var(--line);
  border-radius:999px;padding:1px 8px;font-size:11px}
.sub:empty{display:none}
footer{text-align:center;color:var(--muted);font-size:13px;padding:30px 16px 50px}
/* Lightbox */
#lb{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;
  align-items:center;justify-content:center;z-index:50;padding:20px}
#lb.open{display:flex}
#lb video{max-width:100%;max-height:82vh;border-radius:8px;background:#000;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
#lb .lbcap{position:absolute;top:18px;left:0;right:0;text-align:center;
  color:var(--fg);font-size:15px;pointer-events:none}
#lb .close{position:absolute;top:14px;right:18px;font-size:30px;line-height:1;
  color:#fff;cursor:pointer;background:none;border:none;opacity:.8}
#lb .close:hover{opacity:1}
.empty{text-align:center;color:var(--muted);padding:60px 20px}

/* ===== Globus-Sektion (Startseite) ===== */
.globe-section{margin-top:64px;border-top:1px solid var(--line);padding-top:40px}
.globe-section h2{font-size:clamp(20px,4vw,28px);margin:0 0 10px;text-align:center}
.globe-section .ghint{max-width:760px;margin:0 auto 22px;text-align:center;
  color:var(--muted);font-size:15px;line-height:1.6}
.globe-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.globe-tab{border:1px solid var(--line);background:var(--panel);color:var(--muted);
  padding:7px 16px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:600;
  transition:color .15s ease,border-color .15s ease}
.globe-tab:hover{color:var(--fg);border-color:var(--accent)}
.globe-tab.is-active{background:var(--accent);color:#1a1608;border-color:var(--accent)}
.globe-stage{position:relative;width:100%;height:620px;border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#141c26 0%,#0b0d10 75%);
  border:1px solid var(--line)}
.globe-canvas{position:absolute;inset:0;cursor:grab}
.globe-canvas:active{cursor:grabbing}
.globe-badge{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  background:rgba(11,13,16,.78);backdrop-filter:blur(4px);color:var(--muted);
  font-size:12px;font-weight:600;letter-spacing:.01em;padding:5px 14px;border-radius:999px;
  border:1px solid var(--line);pointer-events:none;white-space:nowrap}
.globe-canvas .scene-tooltip{background:#eef2f6 !important;color:#0b0d10 !important;
  font-family:inherit !important;font-size:13px !important;font-weight:700 !important;
  border-radius:8px !important;padding:6px 10px !important;
  box-shadow:0 6px 20px rgba(0,0,0,.45);white-space:nowrap}
.globe-fallback{margin-top:14px;padding:14px;border-radius:12px;text-align:center;
  background:var(--panel);color:var(--muted);border:1px solid var(--line)}
/* Länder-Links unterm Globus (auch ohne JS / für Suchmaschinen) */
.country-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 0}
.country-chip{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-size:14px;font-weight:600;color:var(--fg);
  transition:transform .15s ease,border-color .15s ease}
.country-chip:hover{transform:translateY(-2px);border-color:var(--accent)}
.country-chip .n{color:var(--accent);font-size:12px;font-weight:700}
@media (max-width:720px){ .globe-stage{height:440px} }
@media (max-width:480px){ .globe-stage{height:380px} }

/* ===== Länder-Übersichtskarte (Overlay, öffnet per Klick auf dem Globus) ===== */
#map-overlay{position:fixed;inset:0;background:rgba(4,6,8,.72);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:40;padding:16px}
#map-overlay.is-open{display:flex}
.map-modal{position:relative;width:min(1060px,97vw);max-height:94vh;display:flex;
  flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:18px;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.map-modal h3{margin:0 2.4rem 4px 0;font-size:clamp(18px,3vw,24px);color:var(--fg)}
.map-modal .msub{margin:0 2.4rem 12px 0;color:var(--muted);font-size:14px}
.map-close{position:absolute;top:10px;right:14px;border:0;background:none;color:var(--muted);
  font-size:30px;line-height:1;cursor:pointer;padding:4px}
.map-close:hover{color:var(--fg)}
#map-canvas{width:100%;height:min(62vh,620px);border-radius:12px;overflow:hidden;
  background:#0e141b;border:1px solid var(--line);position:relative;z-index:0}
.map-foot{margin:12px 0 0;text-align:center}
.map-foot a{color:var(--accent);text-decoration:none;font-weight:600;font-size:14px}
.map-foot a:hover{text-decoration:underline}
/* Leaflet-Feintuning dunkel */
#map-canvas .leaflet-container{font-family:inherit;background:#0e141b}
#map-canvas .leaflet-control-zoom a{background:var(--panel);color:var(--fg);border-color:var(--line)}
#map-canvas .leaflet-control-attribution{background:rgba(11,13,16,.75);color:var(--muted);font-size:10px}
#map-canvas .leaflet-control-attribution a{color:var(--muted)}
/* Pins: goldener Punkt, bei mehreren Videos mit Zähler */
.tl-pin{position:relative}
.tl-pin__dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  min-width:20px;height:20px;padding:0 3px;border-radius:999px;background:var(--accent);
  border:2.5px solid #0b0d10;box-shadow:0 0 0 1.5px rgba(224,182,77,.5),0 3px 10px rgba(0,0,0,.55);
  color:#1a1608;font-size:11px;font-weight:800;line-height:15px;text-align:center;
  display:inline-block;transition:transform .15s ease}
.tl-pin:hover .tl-pin__dot{transform:translate(-50%,-50%) scale(1.3)}
.tl-pin-tip{background:#eef2f6;color:#0b0d10;border:0;border-radius:8px;
  font-weight:700;font-size:12.5px;padding:5px 9px;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.tl-pin-tip::before{border-top-color:#eef2f6}
/* Popup mit Videoliste */
.tl-popup .leaflet-popup-content-wrapper{background:var(--panel);color:var(--fg);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 44px rgba(0,0,0,.55)}
.tl-popup .leaflet-popup-tip{background:var(--panel);border:1px solid var(--line)}
.tl-popup .leaflet-popup-content{margin:10px 12px}
.tl-popup a.leaflet-popup-close-button{color:var(--muted)}
.tl-pop__head{font-weight:700;font-size:14px;margin:0 14px 8px 0}
.tl-pop__head span{color:var(--muted);font-weight:600;font-size:12px}
.tl-pop ul{list-style:none;margin:0;padding:0;max-height:280px;overflow:auto}
.tl-pop li{display:grid;grid-template-columns:74px 1fr;grid-template-rows:auto auto;
  gap:2px 10px;align-items:center;padding:6px;border-radius:8px;cursor:pointer}
.tl-pop li:hover{background:rgba(224,182,77,.12)}
.tl-pop li img{grid-row:1/3;width:74px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;display:block}
.tl-pop li .t{font-size:13px;font-weight:600;color:var(--fg);line-height:1.25}
.tl-pop li .m{font-size:11px;color:var(--muted)}
@media (max-width:720px){ .map-modal{padding:12px} #map-canvas{height:58vh} }

/* ===== Bundesländer-Karte (/land/deutschland/) ===== */
.de-map-stage{position:relative;width:100%;max-width:760px;margin:0 auto;height:640px;
  border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(120% 100% at 50% 0%,#141c26 0%,#0b0d10 75%)}
#de-map{position:absolute;inset:0;background:transparent}
#de-map.leaflet-container{background:transparent;font-family:inherit}
#de-map .leaflet-control-zoom a{background:var(--panel);color:var(--fg);border-color:var(--line)}
#de-map .leaflet-interactive{cursor:pointer}
@media (max-width:720px){ .de-map-stage{height:480px} }
@media (max-width:480px){ .de-map-stage{height:420px} }

/* ===== Orte-Karte (Bundesland-Seiten) ===== */
.orte-map-section{margin:0 0 26px}
.orte-map-stage{position:relative;width:100%;height:440px;border-radius:14px;
  overflow:hidden;border:1px solid var(--line);background:#0e141b}
#orte-map{position:absolute;inset:0}
#orte-map.leaflet-container{font-family:inherit;background:#0e141b}
#orte-map .leaflet-control-zoom a{background:var(--panel);color:var(--fg);border-color:var(--line)}
#orte-map .leaflet-control-attribution{background:rgba(11,13,16,.75);color:var(--muted);font-size:10px}
#orte-map .leaflet-control-attribution a{color:var(--muted)}
.orte-map-hint{margin-top:10px;text-align:center}
@media (max-width:720px){ .orte-map-stage{height:340px} }