/* Allgemeine Styles */

body {
  background-color: #000;
  color: #fff;
  font-family: Verdana, sans-serif;
  margin: 0;
   padding: 0 0.5rem;
}

body.no-scroll {
  overflow: hidden;
}


.page-wrapper {
  max-width: 100%;
  margin: 0 auto;
}

@media (min-width: 1600px) {
  .page-wrapper {
  /*  max-width: 75%;*/
  max-width: 1600px;
  }
}


.zitat-block {
  text-align: center;
  margin: 0rem auto;
  max-width: 900px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1.5s ease forwards;
}

.zitat-block blockquote {
  font-size: 1.3rem;
  color: #f0f0f0;
  font-style: italic;
  margin: 1rem;
     padding: 1.5rem 0rem;
}

.zitat-block blockquote hr {
  width: 60px;
  border: none;
  border-top: 3px solid #66ccff;
  margin: 1rem auto;
  animation: lineGrow 1s ease forwards;
}

.zitat-block cite {
  display: block;
  font-size: 1rem;
  color: #aaa;
  margin-top: 0rem;
}

/* Fade-Effekt */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Linie animiert einblenden */
@keyframes lineGrow {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 60px;
    opacity: 1;
  }
}


/* Header */
header img {
  width: 100%;
  max-width: 600px;   /* Deine Anpassung */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Header mit Hintergrundbild */
.seite-galerie header {
  background-image: url("foto/galerie/galerieKarte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* Oder: cover */
  padding: 60px 20px 60px 20px;
  color: #fff;
  text-align: center;
}

.seite-alpen header {
  background-image: url("foto/italien/dolomitenKarte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* Oder: cover */
  padding: 60px 20px 40px 20px;
  color: #fff;
  text-align: center;
}

.seite-malaga header {
  background-image: url("foto/malaga/malagaKarte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* Oder: cover */
  padding: 60px 20px 60px 20px;
  color: #fff;
  text-align: center;
}

.seite-malta header {
  background-image: url("foto/malta/maltaKarte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* Oder: cover */
  padding: 60px 20px 60px 20px;
  color: #fff;
  text-align: center;
}

.seite-salzburgerLand header {
  background-image: url("foto/salzburgerLand/salzburgerLandKarte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* Oder: cover */
  padding: 60px 20px 40px 20px;
  color: #fff;
  text-align: center;
}

.seite-anderes header {
  background-image: url("foto/anderes/anderesKarte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* Oder: cover */
  padding: 60px 20px 60px 20px;
  color: #fff;
  text-align: center;
}

.seite-architektur header {
  background-image: url("foto/architektur/archKarte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* oder: cover, wenn du volle Fläche willst */
  max-height: 300px; /* Höhe erzwingen – Wert nach Wunsch */
  padding: 40px 20px; /* ggf. weniger Innenabstand */
  color: #fff;
  text-align: center;
}

.seite-london header {
  background-image: url("foto/london/londonKarte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* oder: cover, wenn du volle Fläche willst */
  max-height: 300px; /* Höhe erzwingen – Wert nach Wunsch */
  padding: 40px 20px; /* ggf. weniger Innenabstand */
  color: #fff;
  text-align: center;
}

.seite-sky header {
  background-image: url("foto/sky/skyKarte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* oder: cover, wenn du volle Fläche willst */
  max-height: 300px; /* Höhe erzwingen – Wert nach Wunsch */
  padding: 40px 20px; /* ggf. weniger Innenabstand */
  color: #fff;
  text-align: center;
}

.seite-grafik header {
  background-image: url("foto/grafik/grafikKarte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* oder: cover, wenn du volle Fläche willst */
  max-height: 300px; /* Höhe erzwingen – Wert nach Wunsch */
  padding: 40px 20px; /* ggf. weniger Innenabstand */
  color: #fff;
  text-align: center;
}

.seite-street header {
  background-image: url("foto/street/streetKarte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* oder: cover, wenn du volle Fläche willst */
  max-height: 300px; /* Höhe erzwingen – Wert nach Wunsch */
  padding: 40px 20px; /* ggf. weniger Innenabstand */
  color: #fff;
  text-align: center;
}

.seite-autor header {
  background-image: url("autorKarte1.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* Oder: cover */
  padding: 60px 20px 60px 20px;
  color: #fff;
  text-align: center;
}

.seite-chrono header {
  background-image: url("chrono.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* Oder: cover */
  padding: 60px 20px 60px 20px;
  color: #fff;
  text-align: center;
}

.seite-hkong header {
  background-image: url("foto/hkong/hkongKarte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* Oder: cover */
  padding: 60px 20px 60px 20px;
  color: #fff;
  text-align: center;
}

.seite-rom header {
  background-image: url("foto/rom/romKarte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* oder: cover, wenn du volle Fläche willst */
  max-height: 300px; /* Höhe erzwingen – Wert nach Wunsch */
  padding: 40px 20px; /* ggf. weniger Innenabstand */
  color: #fff;
  text-align: center;
}

.seite-adria header {
  background-image: url("foto/adria/adriaKarte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* oder: cover, wenn du volle Fläche willst */
  max-height: 300px; /* Höhe erzwingen – Wert nach Wunsch */
  padding: 40px 20px; /* ggf. weniger Innenabstand */
  color: #fff;
  text-align: center;
}

.seite-london2 header {
  background-image: url("foto/london2/london2Karte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* oder: cover, wenn du volle Fläche willst */
  max-height: 300px; /* Höhe erzwingen – Wert nach Wunsch */
  padding: 40px 20px; /* ggf. weniger Innenabstand */
  color: #fff;
  text-align: center;
}

.seite-newYork94 header {
  background-image: url("foto/newYork94/newYork94Karte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* oder: cover, wenn du volle Fläche willst */
  max-height: 300px; /* Höhe erzwingen – Wert nach Wunsch */
  padding: 40px 20px; /* ggf. weniger Innenabstand */
  color: #fff;
  text-align: center;
}

.seite-ruhrTour header {
  background-image: url("foto/ruhrTour/ruhrTourKarte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* oder: cover, wenn du volle Fläche willst */
  max-height: 300px; /* Höhe erzwingen – Wert nach Wunsch */
  padding: 40px 20px; /* ggf. weniger Innenabstand */
  color: #fff;
  text-align: center;
}

.seite-frankreich97 header {
  background-image: url("foto/frankreich97/frankreich97Karte.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain; /* oder: cover, wenn du volle Fläche willst */
  max-height: 300px; /* Höhe erzwingen – Wert nach Wunsch */
  padding: 40px 20px; /* ggf. weniger Innenabstand */
  color: #fff;
  text-align: center;
}

header h2,
header h3 {
  text-align: center;
  margin: 0.5rem 0;
}

/* Galerie & Bild-Grid */
.masonry {
  column-width: 100px;  /* Spalten mindestens 200px breit */
  column-gap: 1rem;
}

.masonry img {
  width: 100%;           /* Bild füllt die Spaltenbreite */
  display: block;
  margin-bottom: 1rem;   /* Abstand unter den Bildern */
  break-inside: avoid;   /* Verhindert das Brechen der Bilder in Spalten */
}

/* Accordion */
.accordion {
  background-color: #222;
  color: white;
  padding: 1rem;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Hamburger-Icon */
.hamburger {
  position: relative;
  width: 22px;
  height: 16px;
}

.hamburger span {
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  left: 0;
  transition: 0.3s ease;
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 7px; }
.hamburger span:nth-child(3) { top: 14px; }

/* X-Animation */
.accordion.active .hamburger span:nth-child(1) {
  transform: rotate(45deg);
  top: 7px;
}

.accordion.active .hamburger span:nth-child(2) {
  opacity: 0;
}

.accordion.active .hamburger span:nth-child(3) {
  transform: rotate(-45deg);
  top: 7px;
}

/* Panel */
.panel {
  display: none;
  padding: 1rem;
  background-color: #333;
}

.panel.open {
  display: block;
}


.panel.collapsed {
  display: none; /* Überschreibt nur das Display */
}

.panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.panel ul li {
  margin: 0.4rem 0;
}

.panel ul li a {
  color: #66ccff; /*#add8e6;  Hellblau */
  text-decoration: none;
  font-weight: normal;
}

.panel ul li a:hover {
  text-decoration: underline;
}

/* Galerielink Navigation auf erster Seite */
.hauptnavigation {
  display: flex;
  justify-content: left;
  gap: 2rem;
  padding: 1rem 0;
  background-color: #111;
}

.hauptnavigation a {
  color: #66ccff; /*#add8e6;  hellblau */
  text-decoration: none;
  font-weight: normal; /* kein fett */
  font-size: 1rem;
}

.hauptnavigation a:hover {
  text-decoration: underline;
}

.hauptgalerie {
  display: flex;
  justify-content: left;
  gap: 2rem;
  padding: 1rem 0;
  background-color: #111;
}

.hauptgalerie a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.05rem;
  color: #66ccff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hauptgalerie a:hover {
  color: #99ddff;
}

/* Footer */
footer {
  text-align: center;
  padding: 1rem;
  background-color: #111;
  font-size: 0.9rem;
}


#lightboxOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
        flex-direction: column;
  z-index: 1000;
}

#lightboxImage {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 15px rgba(0,0,0,0.9);
}

#lightboxCaption {
  color: #ccc;
  font-size: 1rem;
  text-align: center;
  max-width: 90%;
  padding: 0 1rem;
}


#lightboxPrev,
#lightboxNext {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: white;
  cursor: pointer;
  user-select: none;
  padding: 0 15px;
  z-index: 1001;
  right: 20px;
  width: 40px;
  height: 40px;
  z-index: 1000;
}

/* Oben platzieren */
#lightboxPrev {
  top: 40%;
}

/* Direkt darunter platzieren */
#lightboxNext {
  top: 50%;
}

/* Optional: Pfeile auf kleinen Bildschirmen ausblenden */

@media (max-width: 768px) {
  #lightboxPrev,
  #lightboxNext {
    display: none !important;
  }
}

/* ============================
   Galerieübersicht (fluides Design)
============================ */
.galerie-uebersicht {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 22vw, 260px), 1fr));
  gap: clamp(0.8rem, 2vw, 1.0rem);
  padding: clamp(0.5rem, 2vw, 1rem) clamp(1rem, 4vw, 2rem) clamp(1rem, 4vw, 2rem);

}

.autor-uebersicht  {
  gap: clamp(0.8rem, 2vw, 1.0rem);
  padding: clamp(1rem, 4vw, 2rem);
}

.galerie-karte {
  background-color: #5e5d5d;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.galerie-karte:hover {
  transform: scale(1.04);
}

.galerie-karte a {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: clamp(0.5rem, 1.5vw, 0.6rem);
}

.galerie-karte img {
  width: 100%;
  height: clamp(100px, 20vw, 140px);
  object-fit: cover;
  border-radius: 3px;
}

.galerie-karte h3 {
  margin: clamp(0.4rem, 1vw, 0.6rem) 0 clamp(0.2rem, 0.5vw, 0.4rem);
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: #ffffff;
}

.galerie-karte p {
  margin: 0;
  color: #ccc;
  font-size: clamp(0.8rem, 1.5vw, 0.95rem);
}

/* ============================
   Responsive Anpassung Galerie
============================ */
@media (max-width: 600px) {
  .galerie-uebersicht {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.8rem;
    padding: 1rem;
  }

  .galerie-karte {
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  }

  .galerie-karte img {
	max-width: 320px;
    margin: 0 auto;
    height: 100px;
    border-radius: 2px;
  }

  .galerie-karte h3 {
    font-size: 0.95rem;
    margin: 0.4rem 0 0.3rem;
  }

  .galerie-karte p {
    font-size: 0.9rem;
  }
}

/* Galerie Trenner Linie */
.galerie-trenner-linie {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 2rem 0 1rem;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.6s ease-out forwards;
}

.galerie-trenner-linie::before,
.galerie-trenner-linie::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #fff;
  margin: 0 1rem;
}

.galerie-trenner-linie-ohne-text {
  width: calc(100% - 2rem); /* Breite wie bei Linie mit Text (2rem = margin von ::before + ::after) */
  border-bottom: 1px solid #fff;
  margin: 2rem auto 1rem auto; /* zentriert mit Abstand oben/unten */
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Folge Seiten Navigation */
.seiten-navigation {
  margin: 2rem 0 3rem;
  text-align: center;
}

.seiten-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0 0.25rem;
  background-color: #444;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.seiten-link:hover {
  background-color: #666;
}

.seiten-link.active {
  background-color: #888;
  cursor: default;
}

.seiten-link.rot-markiert {
  border: 2px solid rgb(209, 208, 207); /* weiss passt besser*/
}


  .icon-small {
    width: 2rem;
    height: 2rem;
  }

.galerie-karte.no-image {
  background-color: #474747;  /* dunklerer Ton für Unterscheidung */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: clamp(100px, 18vw, 140px);  /* sorgt für einheitliche Größe */
  text-align: center;
    position: relative;
  overflow: hidden;

}

.galerie-karte.no-image a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 1rem; /* optional für Innenabstand */
  text-decoration: none; /* optional, entfernt Unterstreichung */
}

.galerie-karte.no-image h3 {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: #ffffff;
  margin-bottom: 0.3rem;
}

.galerie-karte.no-image p {
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  color: #ccc;
  margin: 0;
}

#lightboxImage {
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 0 30px rgba(0,0,0,0.4);
  cursor: pointer; /* ← Hand-Cursor aktiv */
}


/*Varianten mit roten Rahmen um Boxen*/
/*
.galerie-karte.neu h3 {
  border: 1px solid red;
  padding: 0.3rem;
  border-radius: 4px;
}*/

/*
.galerie-karte.neu {
  border: 1px solid rgba(255, 100, 100, 0.8);
  animation: borderFadeIn 2s ease-in-out;
}*/
.galerie-karte.neu {
  border: 2px solid rgba(255, 100, 100, 0.6);
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(255, 100, 100, 0.2);
  animation: borderFadeIn 2s ease-in-out;
}


@keyframes borderFadeIn {
  0% {
    border-color: transparent;
  }
  100% {
    border-color: rgba(255, 100, 100, 0.8);
  }
}

.gallery-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7); /* dezentes Weiß auf Schwarz */
  font-size: 0.85rem;
  font-family: sans-serif;
  margin-bottom: 1rem;
}

.hint-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.8;
}

/* neue Inhalte zentrieren */
.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5vh; /* oder 100vh */
}

/* Galerie Text */
.gallery-text {
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.7;
  max-width: 800px;
  margin: 4rem auto;
  padding: 2rem;
  background: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.gallery-text h1,
.gallery-text h2 {
  color: #222;
  font-weight: 600;
  margin-top: 2rem;
}

.gallery-text h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.gallery-text p {
  margin-bottom: 1rem;
  color: #444;
}

.gallery-text ul {
  margin-left: 1.5rem;
  list-style: disc;
}

.gallery-text a {
  color: #0077cc;
  text-decoration: underline;
}


/* info-bereich */
.info-bereich {
  display: none;
  padding: 0.3rem;
  margin: 1rem 0;
  background: #111;
  color: #ccc;
  border: 1px solid #66ccff;
  border-radius: 8px;
}

.info-bereich.show {
  display: block;
}

/* ===============================
   Galerie Filterleiste
   =============================== */
.galerie-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
    padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  border-radius: 6px;
}

.galerie-filter button {
  background: none;
  border: 1px solid #66ccff;
  color: #66ccff;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.galerie-filter button:hover {
  background: #66ccff;
  color: #000;
}

.galerie-filter button.active {
  background: #66ccff;
  color: #000;
}

/* Responsive für kleine Bildschirme */
@media (max-width: 480px) {
  .galerie-filter {
    gap: 0.5rem;
  }

  .galerie-filter button {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
  }
}

/* CSS: fade-Effekt für Karten */
.galerie-karte {
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 1;
}

.galerie-karte.hide {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none; /* optional, verhindert Klicks */
}

/* alt nav */
.desktop-nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
  background: #000;  /* #222 */
}

.desktop-nav a {
  color: #f2f2f2;
  text-decoration: none;
  transition: transform 0.2s, color 0.3s;
}

.desktop-nav svg {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}

.desktop-nav a:hover {
  transform: scale(1.2);
 	*color: #ffffff;  /*  helleres Blau statt Orange #ffcc00 */

}

@media (max-width: 767px) {
  .desktop-nav { display: none; } /* wird auf Mobil unsichtbar */
}
/* Standard: Mobile = Burger sichtbar, Desktop = Icon-Bar ausgeblendet */
.mobile-nav { display: block; }
.desktop-nav { display: none; }

/* Desktop ab 768px */
@media (min-width: 768px) {
  .mobile-nav { display: none; }
  .desktop-nav { display: flex; gap: 2rem; justify-content: center; }
}
const menuToggle = document.getElementById("menuToggle");
const panel = menuToggle.nextElementSibling;

menuToggle.addEventListener("click", () => {
  panel.style.display = panel.style.display === "block" ? "none" : "block";
});


.desktop-nav a {
  line-height: 0;
}

.desktop-nav a img {
  display: block;
}



/* Neue Svg Farbe aendern */
/* Standardzustand – dein hellblau #66ccff */
.galerie-filter a img {
  filter: brightness(0) saturate(100%) invert(66%) sepia(63%) saturate(514%) hue-rotate(162deg) brightness(102%) contrast(97%);
  transition: filter 0.3s ease;
}

/* Hoverzustand – sehr hellblau #b5e6ff */
.galerie-filter a:hover img {
  filter: brightness(0) saturate(100%) invert(87%) sepia(6%) saturate(452%) hue-rotate(178deg) brightness(103%) contrast(101%);
}