.vz-zeitstrahl-container {
position: relative;
max-width: 1000px;
margin: 0 auto;
padding: 40px 20px;
border: 2px solid #aaa;  border-radius: 20px;
} .vz-zeitstrahl-linie {
position: absolute;
left: 50%;
width: 4px;
background-color: #8b4513;
top: 20px;
bottom: 20px;
margin-left: -2px;
}
.vz-zeitstrahl-linie::before {
content: "";
position: absolute;
top: 0; left: calc(50% + 1.8px);
transform: translateX(-50%);
width: 20px;
height: 20px;
border-radius: 50%; background-color: #8b4513;
margin-left: -2px;
}
.vz-zeitstrahl-linie::after {
content: "";
position: absolute;
bottom: 0; left: calc(50% + 1.8px);
transform: translateX(-50%);
width: 20px;
height: 20px;
border-radius: 50%; background-color: #8b4513;
margin-left: -2px;
} .vz-zeitstrahl-row {
position: relative;
width: 45%;
margin-bottom: 150px;
} .vz-zeitstrahl-daten {
border: solid 1px #8b4513;
border-radius: 6px;
padding: 5px;
} .vz-zeitstrahl-daten-kategorie {
color: #8b4513;
font-size: 1.2em;
}
.vz-termindetails {
font-size: 0.7em;
} .vz-zeitstrahl-text {
font-size: 0.8em;
} .vz-zeitstrahl-row.vz-rechts {
left: 55%;
}
.vz-zeitstrahl-row.vz-links {
left: 0;
} .vz-zeitstrahl-eintrag {
background: #f9f9f9;
padding: 15px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} .vz-zeitstrahl-bild {
border: 1px dotted red;
display: flex;
justify-content: center;
align-items: center;
}
.vz-zeitstrahl-bild img {
width: 100%; height: auto; object-fit: contain; image-rendering: -webkit-optimize-contrast; } .vz-zeitstrahl-row.vz-rechts::after {
content: "";
position: absolute;
top: 30px;
left: -15px;
border-right: 15px solid #f9f9f9;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
.vz-zeitstrahl-row.vz-links::after {
content: "";
position: absolute;
top: 30px;
right: -15px;
border-left: 15px solid #f9f9f9;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
} .vz-zeitstrahl-punkt {
position: absolute;
top: 18px;
left: calc(100% + 27px);
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
border: 2px dashed #8b4513;
z-index: 2;
} .vz-zeitstrahl-row.vz-links .vz-zeitstrahl-punkt {
left: calc(100% + 23px);
} .vz-zeitstrahl-row.vz-rechts .vz-zeitstrahl-punkt {
left: -76px;
}
.vz-zeitstrahl-punkt::after {
content: "\f041";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #8b4513;
font-size: 12px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} @media (max-width: 768px) { .vz-zeitstrahl-linie {
display: none;
} .vz-zeitstrahl-row::after {
display: none;
} .vz-zeitstrahl-punkt {
display: none;
} .vz-zeitstrahl-row {
width: 100%;
left: 0 !important;
padding-left: 0;
margin-bottom: 30px; } .vz-zeitstrahl-eintrag {
margin: 0 auto;
max-width: 90%; }
}