:root{ --reflow-nudge: 0; }

@font-face{
  font-family: "NyghtSerif";
  src: url("../fonts/nyghtserif/NyghtSerif-MediumItalic.woff2") format("woff2"),
       url("../fonts/nyghtserif/NyghtSerif-MediumItalic.ttf") format("truetype");
  font-weight: 500;   /* Medium */
  font-style: italic; /* Italic-Variante */
  font-display: swap;
}

/* Reset */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-fg);
  font-family:var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size:var(--text-base);
  line-height:1.4;
  overflow: hidden; /* Wir scrollen im Sheet */
}

/* Splash unter allem */
.splash{
  position: fixed;
  inset: 0;
  background: #5a5a5a; /* Platzhalter */
  z-index: 0;
}

/* Menü (dock top/bottom) */
.menu{
  position:fixed;
  left:0; right:0; top:0;
  height:var(--menu-h);
  background:#000;
  /* Hairline statt Border */
  box-shadow: inset 0 -0.5px 0 var(--color-border);
  z-index: 1000;
  transform: translateY(0);                 /* WICHTIG: Basis oben */
  transition: transform 180ms ease-out;
}

/* UNTEN andocken (Startmodus der Index-Seite) */
.menu.dock-bottom{
  transform: translateY(calc(var(--vhpx, 100dvh) - var(--menu-h))); /* FEHLTE */
  box-shadow: inset 0 0.5px 0 var(--color-border);                  /* Linie oben */
}

/* Menüinhalt: 4 Spalten */
.menu__inner.nav{
  height:100%;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  align-items:center;
}

/* Nav-Links: Roboto Black, groß; bei Hover/Active Black Italic + unterstrichen */
.nav__link{
  display:block;
  text-align:center;
  text-decoration:none;
  color:var(--color-fg);
  padding:.35rem .75rem;
  border:none; /* keine weißen Umrandungen */
  font-size: var(--text-nav);
  font-weight: var(--font-weight-black);
  font-style: normal;
}
/* Nav – Hover/Active: Nyght + Giftgrün + italic */
.nav__link:hover,
.nav__link[aria-current="page"],
.nav__link:focus-visible{
  text-decoration: none;
  font-family: var(--font-serif);   /* NyghtSerif */
  color: var(--color-accent);       /* Giftgrün */
  font-size: var(--nav-active-size);
  font-weight: var(--nav-active-weight);
  font-style: italic;
}

/* SHEET – Content-Panel über dem Bild */
.sheet{
  position: fixed;
  left:0; right:0; bottom:0;
  top: calc(var(--vhpx, 100dvh) - var(--menu-h)); /* wenn Menü unten */
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  z-index: 500;
  overflow: auto;
  overscroll-behavior: contain;
  transition: top 180ms ease-out;
}
body.dock-top .sheet{ top: var(--menu-h); }
body.dock-bottom .sheet{ top: calc(var(--vhpx, 100dvh) - var(--menu-h)); }

/* Typo Defaults */
.section{ padding: var(--size-32) var(--size-16); border-bottom:1px solid var(--color-border); }
h1{ font-size: var(--text-2xl); margin:0 0 var(--size-16); font-weight: var(--font-weight-bold); overflow-wrap:anywhere; }
h2{ font-size: var(--text-xl);  margin:0 0 var(--size-12); font-weight: var(--font-weight-bold); }
p { font-size: var(--text-lg); margin:0; max-width: 70ch; }

/* Index-Haupttext: volle Breite, ~45px, Medium 500 */
.index-hero{
  font-size: var(--text-hero);
  font-weight: var(--font-weight-medium);
  max-width: none;
}

/* Demo-Füller (falls benötigt)
.filler{ height: 120vh; background: repeating-linear-gradient(180deg, #000 0px,#000 24px,#0a0a0a 24px,#0a0a0a 48px); }
*/


/* === SNOB Leaflet Popup (vereinheitlicht) === */
:root{
  --popup-w: 200px;
}
@media (orientation: landscape){
  :root{ --popup-w: 320px; }
}

.leaflet-container a.leaflet-popup-close-button { display: none; }

.snob-popup.leaflet-popup { border-radius: 0; }

.snob-popup .leaflet-popup-content-wrapper{
  background: var(--color-bg, #000);
  color: var(--color-fg, #fff);
  border-radius: 0;
  padding: 0;
  border: 0px solid var(--color-fg, #fff);
  width: var(--popup-w) !important;           /* << einheitliche Größe */
  max-width: none;                 /* Leaflet-Limit aufheben */
}

.snob-popup .leaflet-popup-content{
  margin: 0;
  width: var(--popup-w) !important;           /* << sichert gleiche Innenbreite */
}

.snob-popup .leaflet-popup-tip{
  background: var(--color-bg, #000);
  box-shadow: none;
}

.snob-popup__link{
  display:block; text-decoration:none; color:inherit;
}

.snob-popup__img{
  display:block; width:100%; height:auto;
  aspect-ratio: 3 / 2;            /* konsistente Bildhöhe */
  object-fit: cover;
}

.snob-popup__body{
  padding: 10px 12px 12px 12px;
  background: var(--color-bg, #000); /* neu: Body sicher schwarz */
}

.snob-popup__title{
  margin:0 0 6px 0;
  font-family: var(--font-strong, "Roboto"), sans-serif;
  font-weight:900;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height:1.15;
  color: var(--color-fg, #fff);
}

.snob-popup__text{
  margin:0;
  font-family: var(--font, "Roboto"), sans-serif;
  font-weight:500;
  font-size: clamp(12px, 1.4vw, 14px);
  line-height:1.35;
  color: var(--color-fg, #fff);
  opacity:.9;
}

/* Pin-Verhalten */
.snob-pin{ cursor:pointer; }
.snob-popup__link:hover .snob-popup__title { text-decoration: underline; }

/* Aktiver Pin schwarz (ohne neues PNG) */
.leaflet-marker-icon.is-active{
  filter: invert(1) brightness(0.9);   /* weiß -> schwarz */
}

/* ARCHIV: Kategorien-Bar & Grid */
body.archiv .catbar{ padding: var(--size-16) var(--size-16) 12px; }   /* ABSTAND Buttons - Kategorietext */
body.archiv .catbar__wrap{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap: var(--size-8);
  width:100%;
}
body.archiv .catbtn{
  display:block; text-align:center; padding:.55rem .75rem;
  border:1px solid var(--color-border);     /* dünner */
  color:var(--color-fg);
  text-decoration:none; font-weight:500;    /* dünner */
  line-height:1.1; user-select:none; opacity:.8;
}
body.archiv .catbtn:focus-visible{ outline:2px dashed var(--color-border); outline-offset:2px; }
body.archiv .catbtn[aria-selected="true"]{
  border-width:3px; font-weight:900; opacity:1;
}
body.archiv .cattext{ padding: 8px var(--size-16) 0; }
body.archiv .cattext p{ margin:0; max-width:none; }


/* Feste Grids je nach Breite: 2×6, 3×4, 4×3, 6×2 */
body.archiv .catbar__wrap{
  display:grid;
  gap: var(--size-8);
  width:100%;
}

/* sehr breit: 2 Reihen × 6 Spalten -> 6 Spalten */
@media (min-width: 1400px){
  body.archiv .catbar__wrap{ grid-template-columns: repeat(6, minmax(0,1fr)); }
}

/* breit: 3 Reihen × 4 Spalten -> 4 Spalten */
@media (min-width: 1100px) and (max-width: 1399.98px){
  body.archiv .catbar__wrap{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* mittel: 4 Reihen × 3 Spalten -> 3 Spalten */
@media (min-width: 800px) and (max-width: 1099.98px){
  body.archiv .catbar__wrap{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* schmal: 6 Reihen × 2 Spalten -> 2 Spalten */
@media (max-width: 799.98px){
  body.archiv .catbar__wrap{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Immer 1 Spalte im Portrait */
@media (orientation: portrait){
  body.archiv .catbar__wrap{ grid-template-columns: 1fr !important; }
}

/* Sehr schmal (auch wenn Orientation=landscape): 1 Spalte */
@media (max-width: 640px){
  body.archiv .catbar__wrap{ grid-template-columns: 1fr !important; }
}

/* Buttons responsiv skalieren */
body.archiv .catbtn{
  display:block; text-align:center;
  padding: clamp(.45rem, 1.2svw, .75rem) clamp(.6rem, 1.6svw, .9rem);
  border:1px solid var(--color-border);
  color:var(--color-fg); text-decoration:none; font-weight:600; line-height:1.1;
  font-size: clamp(12px, 1.4svw, 18px);
  user-select:none; opacity:.9;
}
body.archiv .catbtn:focus-visible{ outline:2px dashed var(--color-border); outline-offset:2px; }
body.archiv .catbtn[aria-selected="true"]{ border-width:3px; font-weight:900; opacity:1; }

body.archiv .cattext{ padding: 8px var(--size-16) 0; }
body.archiv .cattext p{ margin:0; max-width:none; }


/* ARCHIV: Grid */
body.archiv .snob-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min), 1fr));
  gap: var(--gap);
  padding: 24px var(--gap) var(--gap);
}

/* === Background video & sound toggle (index only) === */
.splash{ background:#000; }
.splash video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* === SNOB fix: Wiederbesuch nur dann oben fixieren, wenn body bereits dock-top ist === */
html.visited body.dock-top .menu { transform: translateY(0) !important; }
html.visited body.dock-top .menu.dock-bottom { 
  transform: translateY(0) !important;
  box-shadow: inset 0 -0.5px 0 var(--color-border);
}
html.visited body.dock-top .sheet { top: var(--menu-h) !important; }
html.visited .splash { display: none; }

/* Portrait: compact menu & nav links */
@media (orientation: portrait){

  .nav__link{ padding:.25rem .4rem; }
  .catpicker{ padding-left:0; padding-right:0; }
  .menu__inner.nav{ gap:0; }
  body.archiv .snob-grid{ padding-left:0; padding-right:0; }
}

/* Single-category picker styles */
.catpicker{ position:relative; padding: var(--size-16) var(--gap) 0; }
.catbtn--single{
  display:inline-flex; align-items:center; gap:.5rem;
  width:100%;
  border:1px solid var(--color-border);
  padding:.5rem .75rem; background:transparent; color:var(--color-fg);
  font-weight:600; line-height:1.1; cursor:pointer;
}
.catbtn__icon{ width:1.1em; height:1.1em; display:inline-block; position:relative; }
.catbtn__icon::before, .catbtn__icon::after, .catbtn__icon span{ content:''; display:block; height:2px; background:currentColor; margin:3px 0; }
.catselect{ position:absolute; inset:0; opacity:0; width:100%; height:100%; appearance:auto; }


/* Footer / Impressum */
.snob-footer .imprint{ padding: var(--size-12) var(--gap); }
.snob-footer .imprint p{
  margin:.25rem 0;
  font-size: clamp(10px, 0.7rem, 12px);
  line-height:1.25;
  color: var(--color-muted, #bbb);
}
.snob-footer .imprint a{
  color:#fff; /* Email weiß, nicht blau */
  text-decoration:none;
}
.snob-footer .imprint a:hover,
.snob-footer .imprint a:focus{
  text-decoration: underline;
}
@media (orientation: portrait){
  .snob-footer .imprint{ padding-inline:0; }
}

/* Impressum: bündig links, nie über Bildschirmrand hinaus */
.snob-footer .imprint{
  display: block;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 12px 12px;       /* bündig mit Seiteninhalt */
  box-sizing: border-box;
}

.snob-footer .imprint p{
  margin: .3rem 0;
  font-size: clamp(10px, 0.7rem, 12px);
  line-height: 1.4;
  color: var(--color-muted, #bbb);
  white-space: normal;
}

.snob-footer .imprint a{
  color:#fff;
  text-decoration:none;
}
.snob-footer .imprint a:hover{
  text-decoration: underline;
}

.snob-footer{
  margin-top: 24px;
  margin-bottom: 12px;
}

/* Impressum mobil bündig mit Inhalt */
@media (max-width: 1023px){
  .snob-footer .imprint{
    padding: 0 12px 12px;
  }
}

/* Global: mehr Abstand zum Impressum (überall) */
.snob-footer{
  margin-top: clamp(24px, 2.5vw, 48px); /* Abstand VOR dem Footer */
}

/* Popups: Vorschautext deaktivieren */
.snob-popup__text{ display:none !important; }

/* Mobile: Popover-Select */
@media (orientation: portrait){
  /* Button (geschlossenes Menü) */
  .catbtn--single{
    width:100%;
    background:#111; color:#fff;
    border:1px solid var(--color-border);
    font-family: var(--font,"Roboto"), sans-serif;
    font-weight:600; font-size: clamp(14px, 4svw, 18px);
    border-radius:0; padding:.6rem .8rem;
  }
  .catbtn__icon::before,
  .catbtn__icon::after,
  .catbtn__icon span{ background:currentColor; }

  /* Panel (offenes Menü) */
  .catpanel[popover]{ 
    width:100%;
    margin:0; inset:auto 0 auto 0; /* an Button-Breite ankoppeln */
    border:1px solid var(--color-border);
    background:#111; color:#fff;
    max-height:60vh; overflow:auto;
  }
  .catpanel::backdrop{ background:rgba(0,0,0,.25); }

  .catoption{
    padding:.8rem 1rem; cursor:pointer;
    font-family: var(--font,"Roboto"), sans-serif;
  }
  .catoption:hover{ background:#1a1a1a; }
  .catoption[aria-selected="true"]{
    font-weight:800; text-decoration:underline;
  }

  /* Native Select nur mobil ausblenden (wir nutzen Popover) */
  .catselect{ display:none; }
}

/* === Kategorien-Leiste: Ein-/Ausklappen === */
body.archiv .catbtn[aria-selected="true"]{ cursor:pointer; }

/* Ein-/Ausklappen mit Animation (ohne DOM-Umsortierung) */
/* Sichtbarkeit vollständig entfernen (kein Platzbedarf) */
body.archiv .catbtn.is-hidden{ display:none; }

/* einfache Einblend-Animation */
body.archiv .catbtn{
  transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease;
}
body.archiv .catbtn.anim-in{ opacity:0; transform: translateY(-4px); }
body.archiv .catbtn.anim-in.anim-ready{ opacity:1; transform: none; }


/* Desktop/Landscape: im eingeklappten Zustand aktive Kategorie oben links */
@media (orientation: landscape){
  body.archiv .catbar__wrap.catbar--collapsed .catbtn[aria-selected="true"]{ order: -1; }
}


/* ARCHIV: Kategorien – Look */
body.archiv .catbtn{
  font-family: var(--font-serif, "NyghtSerif", Georgia, serif);
  font-style: italic;
  color: var(--color-accent, rgb(153, 255, 153));
  border: 0.5px solid var(--color-bg, #000);   /* sehr dünner Rahmen (standard: „unsichtbar“) */
  font-weight: 500;
  line-height: 1.1;
  padding: clamp(.6rem, 1.9vw, 1rem) clamp(.8rem, 2.2vw, 1.1rem); /* etwas höher */
  font-size: clamp(13px, 1.6svw, 18px);                           /* Basisgröße Desktop */
  background: transparent;
}

/* Aktiver Zustand: dünner, grüner Rahmen */
body.archiv .catbtn[aria-selected="true"]{
  border-color: var(--color-accent, rgb(153, 255, 153));
  border-width: 0.5px;
  font-weight: 500;
}

/* Hover-Effekt (nur Desktop/PC) */
@media (any-hover: hover){
  body.archiv .catbtn:hover{
    border-color: var(--color-accent, rgb(153, 255, 153));
  }
}

/* Portrait: etwas größere Typo */
@media (orientation: portrait){
  body.archiv .catbtn{
    font-size: clamp(14px, 4.6svw, 20px);
  }
}

/* Mobile-Landscape / schmale Breiten: ebenfalls etwas größer */
@media (orientation: landscape) and (max-width: 900px){
  body.archiv .catbtn{
    font-size: clamp(14px, 2.3svw, 18px);
  }
}

/* ARCHIV: einheitlicher Seitenrand nur Desktop/Landscape */
@media (orientation: landscape) and (min-width: 900px){
  /* gleiche Seitenränder wie das Bildraster */
  body.archiv .catbar{
    /* oben belassen, Seiten auf Grid-Wert angleichen */
    padding-left: var(--gap);
    padding-right: var(--gap);
  }
  body.archiv .cattext{
    /* oben/unten belassen, Seiten angleichen */
    padding-left: var(--gap);
    padding-right: var(--gap);
  }
  /* Falls du den oberen Abstand zum Text etwas straffen willst, optional: */
  /* body.archiv .cattext{ padding-top: 8px; } */
}

/* Karte: Zoom-Buttons nur mobil ausblenden */
@media (orientation: portrait){
  .leaflet-control-zoom{ display:none !important; }
}

/* Karte: Popups mobil etwas breiter (~+10%) */
@media (orientation: portrait){
  :root{ --popup-w: 220px; }
}

/* Desktop: dunklere Scrollbar im Content-Panel (.sheet) */

/* Chrome/Edge/Safari (WebKit/Blink) */
@media (hover:hover) and (pointer:fine){
  .sheet::-webkit-scrollbar{ width: 10px; }
  .sheet::-webkit-scrollbar-track{ background:#0a0a0a; }
  .sheet::-webkit-scrollbar-thumb{
    background:#333; border-radius:8px; border:2px solid #0a0a0a;
  }
  .sheet::-webkit-scrollbar-thumb:hover{ background:#444; }
}

/* Firefox */
@media (hover:hover) and (pointer:fine){
  .sheet{
    scrollbar-width: thin;                 /* dünn */
    scrollbar-color: #333 #0a0a0a;         /* thumb | track */
  }
}