:root{
  --topbar-h: 70px;
}

html,body{
  margin:0;
  height:100%;
}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #000;
  color: #fff;
}

/* ===== SEITENLAYOUT ===== */
.page{
  height:100dvh;
  display:grid;
  grid-template-rows: var(--topbar-h) 1fr;
  overflow:hidden;
  background:#000;
}

/* ===== MENU ===== */
.topbar{
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  background:rgba(0,0,0,0.85);
  border-bottom:1px solid rgba(255,255,255,0.15);
  color:white;
}

.menu{
  display:flex;
  gap:15px;
}

.menu a{
  color:white;
  text-decoration:none;
}

/* ===== GALLERY BEREICH ===== */
.stage{
  position:relative;
  min-height:0;
  overflow:hidden;
  background:#000;
}

/* ===== SLIDER ===== */
.slider,
.slide{
  position:absolute;
  inset:0;
}

.slide{
  opacity:0;
  transition:opacity 0.8s ease;
  background:#000;
}

.slide.active{
  opacity:1;
}

.slide img{
  width:100%;
  height:100%;
  object-fit:contain;   /* maximales Bild ohne crop */
  background:#000;
  display:block;
}

/* ===== NAV BUTTONS ===== */
.nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:40px;
  color:white;
  background:rgba(0,0,0,0.5);
  border:none;
  width:50px;
  height:50px;
  cursor:pointer;
}

.prev{ left:10px; }
.next{ right:10px; }

/* ================================
   KLICK-GALLERY: Grossbild + Thumbs
   (robust: nichts kann das Menü verschieben)
   ================================ */

.viewer{
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr 140px; /* unten Thumb-Leiste */
  background: #000;
}

/* Hero-Bereich füllt den verfügbaren Platz */
.hero{
  position: relative; /* für absolute img */
  min-height: 0;
  overflow: hidden;
  background: #000;
}

/* Bild wird absolut auf die Hero-Fläche gespannt -> kann NIE Layout verschieben */
.hero img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;  /* maximal groß ohne crop */
  background: #000;     /* dunkle Ränder */
  display: block;
}

/* Thumbnail-Leiste */
.thumbbar{
  border-top: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.92);
  overflow: hidden;
}

.thumbs{
  height: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  overflow-x: auto;      /* horizontales Scrollen */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Optional: Scrollbar sichtbar lassen (je nach Browser) */
.thumbs::-webkit-scrollbar{ height: 10px; }
.thumbs::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.25); border-radius: 10px; }
.thumbs::-webkit-scrollbar-track{ background: rgba(255,255,255,0.06); }

.thumb{
  flex: 0 0 auto;
  width: 150px;
  height: 100px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  cursor: pointer;
}

.thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* thumbs dürfen croppen */
  display: block;
}

.thumb.active{
  border-color: rgba(255,255,255,0.70);
}

/* Responsive */
@media (max-width: 600px){
  .viewer{ grid-template-rows: 1fr 115px; }
  .thumb{ width: 120px; height: 80px; }
}

/* ===== DROPDOWN im Menü ===== */
.dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Button soll wie normaler Menülink wirken */
.dropbtn{
  background: transparent;
  color: #fff;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: 0;
  line-height: 1;
  opacity: .95;
}

.dropbtn:hover{ opacity: 1; }

/* Menü */
.dropmenu{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  min-width: 220px;

  background: rgba(0,0,0,0.95);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 8px;

  z-index: 9999;            /* wichtig: über allem */
}

/* Hover-Brücke: verhindert "hover gap" zwischen Button und Menü */
.dropmenu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-10px;
  height:10px;
}

.dropmenu a{
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  opacity: .9;
  white-space: nowrap;
}

.dropmenu a:hover{
  background: rgba(255,255,255,0.08);
  opacity: 1;
}

.dropmenu a.active{
  background: rgba(255,255,255,0.12);
  opacity: 1;
}

/* Desktop: Hover öffnet Dropdown, kein Klick nötig */
.dropdown:hover .dropmenu{
  display: block;
}

/* Touch-Fallback: JS setzt .open */
.dropdown.open .dropmenu {
  display: block;
} /* <--- Diese Klammer hat gefehlt! */

/* ===== ERGÄNZUNG FÜR TEXTSEITEN (About Me, etc.) ===== */
.page.text-page {
  display: block;        /* Hebt das starre Galerie-Grid auf */
  overflow-y: auto;      /* Erlaubt normales Scrollen auf der Seite */
  height: auto;          /* Verhindert, dass die Seite bei 100vh abschneidet */
  min-height: 100vh;
  overflow-x: hidden;    /* Verhindert seitliches Wackeln */
}

/* Verhindert, dass der Inhalt direkt am Rand klebt */
.page.text-page .content {
  padding-top: 20px;
}

/* Touch-Fallback Fix */
.dropdown.open .dropmenu {
  display: block;
} 

/* Korrektur für Textseiten (wie About Me) */
.page.text-page {
  display: block !important; /* Deaktiviert das Galerie-Grid */
  height: auto !important;
  min-height: 100vh;
  overflow-y: auto !important; /* Ermöglicht normales Scrollen */
  overflow-x: hidden;
}

.page.text-page .topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
}