/* Link-Styling für echte Links */
a:link {color:#000000; background-color: transparent; text-decoration: underline}
a:visited {color:#000000; background-color: transparent; text-decoration: underline}
a:hover {color:#000000; background-color: #4585B6; text-decoration: underline}
a:active {color:#000000; background-color: #4585B6; 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:#4585B6; background-color: none; text-decoration: none}
.link:visited {color:#4585B6; background-color: none; text-decoration: none}
.link:hover {color:#000000; background-color: grey; text-decoration: none}
.link:active {color:#000000; background-color: none; text-decoration: none}

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

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

/* Navigationsmenü oben */
.topnav {overflow: hidden; background-color: #4585B6;}
.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: white; padding: 14px 16px; background-color: #4585B6; 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;
  }
}

/* Handy-Optimierung für Veranstaltungstabelle (Bildschirme kleiner als 600px) */
@media screen and (max-width: 600px) {
    /* Versteckt den normalen Tabellenkopf */
    .responsive-table thead {
        display: none !important;
    }

    /* Macht aus Tabelle, Zeilen und Körper Block-Elemente */
    .responsive-table, 
    .responsive-table tbody, 
    .responsive-table tr {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Schaltet Tabellen-Layout-Fixes aus der Hauptdatei für das Handy ab */
    table.responsive-table {
        table-layout: auto !important;
    }

    /* Entfernt den alten HTML-Tabellenrahmen auf dem Smartphone */
    .responsive-table,
    .responsive-table td {
        border: none !important;
    }

    /* Verwandelt jede Zeile in eine optische Karte (Card) */
    .responsive-table tr {
        margin-bottom: 15px !important;
        border: 1px solid #aaa !important;
        border-radius: 5px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        background: #FFFFFF !important;
        padding: 5px 15px !important; /* Symmetrischer Abstand links und rechts */
    }

    /* Verwandelt jede Zelle in ein zweispaltiges Grid-Layout */
    .responsive-table td {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Teilt die Zelle in zwei gleich große Hälften */
        align-items: center !important;
        border: none !important;
        border-bottom: 1px solid #eee !important;
        padding: 10px 0 !important; /* Kein horizontales Zellen-Padding mehr nötig */
        text-align: right !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Letzte Zelle einer Karte braucht keinen unteren Trennstrich */
    .responsive-table td:last-child {
        border-bottom: none !important;
    }

    /* Blendet das Daten-Label in der linken Spalte ein */
    .responsive-table td::before {
        content: attr(data-label) !important;
        text-align: left !important;
        font-weight: normal !important; /* Linke Beschriftung bleibt normal */
    }
    
    /* Macht ausschließlich das Datum innerhalb der Karte fett */
    .responsive-table td[data-label="Datum"] {
        font-weight: bold !important;
    }
}