/* Link-Styling für echte Links */
a:link {color:#FFD700; background-color: transparent; text-decoration: underline;}
a:visited {color:#FFD700; background-color: transparent; text-decoration: underline;}
a:hover {color:#FFD700; background-color: black; text-decoration: underline;}
a:active {color:#FFD700; background-color: black; text-decoration: underline;}

/* Deaktiviert die Effekte für reine ID-Anker komplett (inkl. Hintergrund) */
a[id]:not([href]), 
a[id]:not([href]):hover, 
a[id]:not([href]):active {color: inherit !important; background-color: transparent !important; text-decoration: none !important; cursor: default !important;}

/* Link-Styling Fußbereich */
.link:link {color:#FFFFFF; background-color: transparent; text-decoration: none;}
.link:visited {color:#FFFFFF; background-color: transparent; text-decoration: none;}
.link:hover {color:#FFFFFF; background-color: grey; text-decoration: none;}
.link:active {color:#FFFFFF; background-color: transparent; text-decoration: none;}

/* Basis-Layout & Seitenelemente */
body {margin: 0; font-family:Verdana, sans-serif; background-color: #00FFFF; color: #00FFFF;}
div.width {max-width: 1280px; margin: auto;}
td.hauptfeld {background-color: #2D364C;}
p {line-height: 1.5 !important;}

img {max-width: 100%; height: auto;}

/* Navigationsmenü oben */
.topnav {overflow: hidden; background-color: black;}
.topnav a {float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 18px;}
.topnav-right {float: right;}
.active {background-color: black; color: white;}
.topnav .icon {display: none;}
.dropdown {float: left; overflow: hidden;}
.dropdown .dropbtn {font-size: 18px; border: none; outline: none; color: silver; padding: 14px 16px; background-color: black; font-family: Verdana; margin: 0; cursor: pointer;}
.dropdown-content {display: none; position: absolute; background-color: silver; min-width: 180px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; transition: 0.2s;}
.dropdown-content a {float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left;}
.topnav a:hover, .dropdown:hover .dropbtn {background-color: grey; color: white;}
.dropdown-content a:hover {background-color: grey; color: white;}
.dropdown:hover .dropdown-content {display: block;}

/* Navigation auf Mobilgeräten */
@media screen and (max-width: 800px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {display: none;}
  .topnav a, .dropdown .dropbtn {font-size: 16px; padding: 12px 10px;}
  .topnav a.icon {float: right; display: block; padding-right: 25px;}
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {position: absolute; right: 0; top: 0;}
  .topnav.responsive a {float: none; display: block; text-align: left;}
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {display: block; width: 100%; text-align: left;}
  .justify {text-align: left !important;}
}

/* Text-Styling */
.left {margin: 10px; text-align: left;}
.right {margin: 10px; text-align: right;}
.center {margin: 10px; text-align: center;}
.justify {margin: 10px; text-align: justify;}

/* 1. Globales Box-Modell */
* {
  box-sizing: border-box;
}

/* 2. Fix für alte HTML-Tabellen */
table {
  table-layout: fixed;
  width: 100%;
}
td {
  word-wrap: break-word;
}

/* 3. Der Galerie-Container (Auf großen Bildschirmen alles nebeneinander) */
.gallery-container {
  display: flex !important;
  flex-direction: row !important; /* Standard: Bilder nebeneinander */
  flex-wrap: wrap !important;     /* Erlaubt das Umbrechen für Mobilgeräte */
  width: 100% !important;
  padding: 10px !important;       /* 10px Abstand zum blauen Feld */
  gap: 10px !important;           /* 10px Abstand zwischen den Bildern */
  box-sizing: border-box !important;
}

/* 4. Die Responsive-Klasse (Automatische Verteilung auf großen Bildschirmen) */
.responsive {
  flex: 1 1 0% !important;        /* Teilt den Platz gleichmäßig auf (bei 2, 3 oder 4 Bildern) */
  min-width: 150px !important;    /* Mindestbreite, damit Bilder nicht unleserlich schmal werden */
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 5. Styling der Galerie-Boxen */
.gallery {
  border: 1px solid #888888;
  border-radius: 0px;
  background-color: transparent;
  overflow: hidden;
  width: 100%;
}

/* 6. Bilder passen sich automatisch an (WICHTIG!) */
.gallery img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* 7. Textbeschreibung unter den Bildern */
.gallery .desc {
  padding: 10px;
  text-align: center;
  color: #FFFFFF;
}

/* 8. Tablet-Ansicht (unter 800px) - Bricht bei vielen Bildern kontrolliert um */
@media only screen and (max-width: 800px) {
  .responsive {
    flex: 1 1 calc(50% - 10px) !important; /* Wechselt bei Bedarf auf ein sauberes 2-Spalten-Raster */
  }
}

/* 9. Smartphone-Ansicht (unter 500px) - IMMER untereinander */
@media only screen and (max-width: 500px) {
  .gallery-container {
    flex-direction: column !important;     /* Schaltet die Richtung auf vertikal um */
  }
  .responsive {
    flex: 1 1 100% !important;             /* Jedes Bild nutzt die volle Breite */
    width: 100% !important;
  }
}