/* Grundlegendes Reset */
.adr {
  float: left;
}

.right {
  float: right;
}

.padding25 {
  padding: 5px;
  
}

/* Standard-Link */
a {
  color: wheat;           /* Linkfarbe */
  text-decoration: none;    /* Kein Unterstrich */
  transition: color 0.3s;   /* Sanfter Farbwechsel beim Hover */
 
}

/* Wenn der Link bereits besucht wurde */
a:visited {
  color: #cc9900;           /* Etwas dunklere Farbe für besuchte Links */
}

/* Wenn man mit der Maus über den Link fährt */
a:hover {
  color: #ffffff;           /* Farbe beim Hover */
  text-decoration: underline; /* Unterstrich beim Hover */
font-size: 1.275em;
}

/* Wenn der Link aktiv ist (z. B. beim Klicken) */
a:active {
  color: #ff6600;           /* Farbe beim Klick */
}



    .bild-container {
      text-align: center;
      margin: 20px;
    }

    .bild-container img {
      max-width: 100%;
      height: auto;
      border: 2px solid #ccc;
    }

    
.bild-unterschrift {
  font-size: 14px;
  color: aqua !important;
  margin-top: 8px;
  font-style: italic;
  text-align: center;
}



mark {
  background-color: wheat;
  color: black;
}
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
            background-color: #121212;
            color: white;
        }

        header, nav, main, footer {
            margin-bottom: 20px;
        }

        header {
            background: #000;
            color: white;
            padding: 20px;
            text-align: center;
        }

        nav ul {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            background: #333;
            padding: 10px;
            justify-content: center;
        }

        nav ul li {
            margin: 0 15px;
        }

        nav ul li a {
            text-decoration: none;
            color: #FFCC00;
        }

        main {
            max-width: 1800px;
            margin: auto;
        }

        .photo-album {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .photo-album img {
            width: 100%;
            border-radius: 10px;
            transition: transform 0.3s, filter 0.3s;
        }

        .photo-album img:hover {
            transform: rotate(5deg) scale(1.05);
            filter: brightness(1.2);
        }

        .caption {
            text-align: center;
            margin-top: 10px;
        }

        form {
            background: #333;
            padding: 20px;
            border-radius: 5px;
        }

        form label {
            display: block;
            margin-top: 10px;
        }

        form input, form textarea {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            background-color: #121212;
            color: #FFCC00;
        }

        form button {
            margin-top: 15px;
            padding: 10px 20px;
            background: #0077cc;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        footer {
            text-align: center;
            font-size: 0.9em;
            color: #666;
        }

        @media (max-width: 600px) {
            nav ul {
                flex-direction: column;
                align-items: center;
            }

            nav ul li {
                margin: 10px 0;
            }
        }

        /* 1. Globale Defensivmaßnahmen */
        .event-list,.event-list * {
            box-sizing: border-box; /* Kritisch für 50% Breite */
        }
        .non-semantic-protector {
            position: relative;
            z-index: 1; /* Schutz gegen z-index-Probleme des Datumsbandes */
        }

        /* 2. Custom Properties (einfache Thematisierung)*/
        :root {
        --card-color-primary: #8b4513
        ; /* Weiß oder heller Ton */
            --card-color-contrast: #cf2e2e; /* Kontrastfarbe (z.B. Rot) */
            --shadow-initial: 0 6px 20px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.08);
        }

        /* 3. Äußeres Layout (Mobile-First: 100% Breite) */
        .event-list {
            display: flex;
            flex-wrap: wrap;
            list-style: none; /* Entfernt Listenpunkte */
            margin: 0;
            padding: 0;
        }

        .event-list__card {
            /* Mobile Standard: Eine Spalte */
            width: 100%;
            padding: 20px;
            margin-bottom: 20px;

            /* Hover-Vorbereitung */
            background-color: var(--card-color-primary);
            box-shadow: var(--shadow-initial);
            transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

            /* Inneres Flexbox-Layout (Media Object) */
            display: flex;
            align-items: flex-start; /* Stellt sicher, dass Elemente oben ausgerichtet sind */
        }

        /* 4. Inneres Layout - 300px Bild fixieren */
        .event-list__content {
            flex: 1; /* Nimmt den restlichen Platz ein */
            padding-right: 20px;
        }

        .event-list__media {
            flex: 0 0 300px; /* Fixiert auf 300px */
            height: auto;
            overflow: hidden;
        }

        /* 5. Desktop Override (50/50 Layout) */
        @media only screen and (min-width : 768px) {
            .event-list__card {
                width: 50%; /* Wechselt zu zwei Spalten */
                padding: 0 15px; /* Horizontales Padding zwischen den Spalten */
            }
        }

        /* 6. Hover-Effekt */
        .event-list__card:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-5px);
        }

        /* 7. Grafisches Datumselement (Auszug) */
        .event-list__date-wrapper {
            position: relative;
            z-index: 2; /* Über den Textinhalt legen */
            width: 80px; /* Beispielgröße */
            flex-shrink: 0;
            margin-right: 20px;
            text-align: center;
        }
        .event-list__date-wrapper::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--card-color-contrast);
            z-index: -1;
        }
        /* Weitere ::after Stile für geometrische Faltungen folgen hier */