/* Der Gesamte CSS Code wird mit der zeitlichen Entwicklung der Webseite erweitert und angepasst. 
Es werden globale Stile, Master-Stile und spezifische Stile für verschiedene Abschnitte der Webseite definiert. 
Die Stile sind darauf ausgelegt, ein ansprechendes und benutzerfreundliches Erlebnis für die Besucher zu schaffen. 
Es werden auch weitere responsive Design-Elemente integriert, um sicherzustellen, dass die Webseite auf verschiedenen Geräten gut aussieht. 
Die Datei ist in Abschnitte organisiert, um die Wartung und Aktualisierung zu erleichtern. */

/* Global Styles */

:root {
  --primary: #aa2f32;
  --secondary: #2e2e2e;
  --accent: #f4b400;
  --background: #faebd7;
  --text: #333333;
  --white: #ffffff;
}

/* Master Styles */

body {
    margin: 0px;
}

.container {
    display: grid;
    grid-template-columns: 1fr;
}

.head {
    position: relative;
}

/* PAGE TITLE BOX (Die Überschrift und Beschreibung jeder Seite)*/ 

.page-header{
text-align:center;
max-width:800px;
margin:60px auto 40px auto;
padding:40px 30px;
background:rgba(255,255,255,0.55);
backdrop-filter:blur(6px);
border-radius:18px;
box-shadow:
0 10px 30px rgba(0,0,0,0.08);
}

/* kleines Label */
.header-label{

font-size:0.8rem;
letter-spacing:2px;
text-transform:uppercase;
color:#aa2f32;
font-weight:600;
margin-bottom:10px;
}

.page-header h1 span {
  color: #aa2f32;
}

/* Aktuelles */

:root {
    --primary: #aa2f32;
    --bg: #f9f6f2;
    --card-bg: #fff;
    --accent: #faebd7;
    --shadow: 0 2px 12px rgba(0,0,0,0.08);
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--bg);
    margin: 0;
    padding: 0;
    color: #222;
    background-color: #faebd7;
}

.page-header{
text-align:center;
max-width:800px;
margin:60px auto 40px auto;
padding:40px 30px;
background:rgba(255,255,255,0.55);
backdrop-filter:blur(6px);
border-radius:18px;
box-shadow:
0 10px 30px rgba(0,0,0,0.08);
}

/* kleines Label */
.header-label{

font-size:0.8rem;
letter-spacing:2px;
text-transform:uppercase;
color:#aa2f32;
font-weight:600;
margin-bottom:10px;
}

/* Haupttitel */
.page-header h1{
font-size:clamp(2rem,4vw,2.8rem);
margin:10px 0;
color:#333;
}

/* Akzentfarbe */
.page-header span{
color:#aa2f32;
}

/* Beschreibung */
.page-header p{
margin-top:10px;
font-size:1.05rem;
line-height:1.6;
color:#555;
}

.title {
    text-align: center;
    margin: 40px 0 20px 0;
    font-size: 1.1rem;
    color: var(--primary);
    font-weight: bold;
    margin-bottom: 70px;
    background: #fff;
    border-radius: 18px, 18px 0 0 18px;
    /*box-shadow: 0 4px 12px rgba(0,0,0,0.08);*/
    padding: 15px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    background-color: #faebd7
}

.container {
    max-width: 1200px;
    margin: -40px auto 0 auto;
    padding: 0 16px 32px 16px;
}
.filter-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
    margin-top: 24px;
}
#yearFilter {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    background: #fff;
    font-size: 1rem;
    font-weight: 500;
    outline: none;
    transition: border 0.2s;
}
#yearFilter:focus {
    border-color: var(--accent);
}
.timeline {
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(var(--primary), var(--accent));
    border-radius: 2px;
    z-index: 0;
}
.event {

    flex-direction: row;
    align-items: flex-start;
    background: var(--card-bg);
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    padding: 20px 24px 20px 72px;
    position: relative;
    min-height: 120px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.event:hover {
    box-shadow: 0 6px 24px rgba(27, 27, 27, 0.13);
    transform: translateY(-2px) scale(1.01);
}
.event-dot {
    position: absolute;
    left: 18px;
    top: 20px;
    width: 24px;
    height: 24px;
    background: var(--primary);
    border: 4px solid #fff;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(170,47,50,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    font-weight: bold;
}
.event-date {
    min-width: 90px;
    color: var(--primary);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    background: var(--accent);
    padding: 4px 12px;
    border-radius: 6px;
    margin-right: 18px;
    align-self: flex-start;
    text-align: center;
    box-shadow: 0 1px 4px rgba(247,200,115,0.08);
}
.event-content {
    flex: 2;
    min-width: 0;
}
.event-content {
    flex: 1;
    min-width: 0;      
}
.event h2 {
    margin: 0 0 8px 0;
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: 700;
}
.event p {
    margin: 0 0 8px 0;
    font-size: 1rem;
    line-height: 1.6;
}
.event img {
    width: 100%;
    max-width: 340px;
    border-radius: 10px;
    margin-top: 10px;
    margin-right: 30;
    box-shadow: 0 2px 8px rgba(170,47,50,0.07);
}
@media (max-width: 800px) {
    .container { max-width: 98vw; }
    .event { padding: 18px 12px 18px 56px; }
    .timeline::before { left: 14px; }
    .event-dot { left: 8px; }
}
@media (max-width: 600px) {
    header { padding: 22px 0 10px 0; border-radius: 0 0 18px 18px; }
    .container { padding: 0 4vw 24px 4vw; }
    .timeline { gap: 18px; }
    .event {
    flex-direction: column;
    padding: 16px 10px 16px 38px;
    min-height: 80px;
    }
    .event-dot { left: 6px; top: 15px; width: 18px; height: 18px; font-size: 0.9rem; }
    .event-date {
    font-size: 0.92rem;
    margin-bottom: 8px;
    margin-right: 0;
    padding: 3px 8px;
    }
    .event img { max-width: 100%; }
}
    .bild-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}
.bild-grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}