 <style>
        body {
            font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color:#E8E8E8;
            color:#212220;
            line-height: 1.6;
        }
        
        .header {
            text-align: center;
			padding: 80px 20px;
			color: white;
			margin-bottom: 30px;
			background-size: cover;
			background-position: center;
			position: relative;
        }
		
		.header::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(183, 163, 116, 0.2);
			z-index: 0;
		}
		
		.header h1, .header p {
			position: relative;
			z-index: 1;
			text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
		}
        /*DeepSeek am 23.05.2025*/
        .menu-container {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
        }
        
        .menu-button {
            background-color: #B7A374;
            color: white;
            padding: 15px 30px;
            font-size: 18px;
            border: none;
            cursor: pointer;
            width: 300px;
            text-align: center;
            border-radius: 0;
            transition: all 0.3s ease;
            letter-spacing: 1px;
            font-weight: 500;
            text-transform: uppercase;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        .menu-button:hover {
            background-color: #958152;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }
        
        .menu-button:active {
            transform: translateY(0);
        }
        
        .dropdown {
            width: 300px;
            margin: 0 auto;
        }
        
        .dropdown-content {
            display: none;
            flex-direction: column;
            background-color: #DDDDDD;
            width: 100%;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            z-index: 1;
            border-top: 3px solid #000;
        }
        
        .dropdown-content a {
            color: #333;
            padding: 15px 20px;
            text-decoration: none;
            text-align: left;
            transition: all 0.2s ease;
            border-bottom: 1px solid #eee;
            font-weight: 500;
        }
        
        .dropdown-content a:hover {
            background-color: #f1f1f1;
            color: #000;
            padding-left: 25px;
        }
        
        .dropdown-content a:last-child {
            border-bottom: none;
        }
        
        .show {
            display: flex;
        }
        
        .content {
            max-width: 800px;
            margin: 40px auto;
            padding: 0 20px;
        }
		
        .carousel {
            max-width: 500px;
            margin: 30px auto;
            text-align: center;
        }
        
        .images {
            height: 600px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            position: relative;
        }
        
        .images img {
            max-height: 100%;
            max-width: 100%;
            object-fit: contain;
            display: none;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .images img.active {
            display: block;
        }
        
        .buttons {
            margin: 20px 0;
        }
        
        .buttons button {
            background-color: #B7A374;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 0 10px;
            cursor: pointer;
            border-radius: 4px;
            font-size: 18px;
            transition: background-color 0.3s;
        }
        
        .buttons button:hover {
            background-color: #958152;
        }
        /*Bis hierhin*/
        .caption {
            font-size: 1.2em;
            padding: 15px;
            background-color: #f5f5f5;
            border-radius: 8px;
            margin-top: 20px;
			text-align: center; 
			max-width: 800px; 
			margin-left: auto; 
			margin-right: auto; 
			line-height: 1.6; 
        }
		
		.linie {
			position: absolute;
			left: 50%;
			top: 500px;
			transform: translateX(-50%);
			width: 2px;
			height: 100vh;
			background-color: black
			}
			
		.content {
			max-width: 1200px;
			margin: 40px auto;
			padding: 0 20px;
			}

		.architecture-section {
			display: flex;
			align-items: center;
			margin-bottom: 60px;
			flex-wrap: wrap;
			}

		.image-container {
			flex: 1;
			min-width: 300px;
			padding: 20px;
			}

		.text-container {
			flex: 1;
			min-width: 300px;
			padding: 20px;
			}

		.image-container img {
			width: 100%;
			border-radius: 8px;
			box-shadow: 0 4px 8px rgba(0,0,0,0.2);
			}

		.left {
			order: 1;
			}

		.right {
			order: 2;
			}
			
/*Durch ChatGPT verfeinert 12.05.2025*/
		.timeline-container {
			background-color: #f5f5f5;
			padding: 40px 0;
			}

		.timeline {
			position: relative;
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 20px;
			}

		.timeline::before {
			content: '';
			position: absolute;
			width: 3px;
			background: linear-gradient(to bottom, #B7A374, #8A6D3B);
			top: 0;
			bottom: 0;
			left: 50%;
			margin-left: -1.5px;
			border-radius: 3px;
			}

		.timeline-event {
			padding: 30px 0;
			position: relative;
			width: 100%;
			clear: both;
			}

		.event-date {
			width: 45%;
			padding: 15px;
			font-weight: bold;
			color: #8A6D3B;
			font-size: 1.3em;
			position: relative;
			}

		.event-content {
			width: 45%;
			padding: 25px;
			background-color: white;
			border-radius: 8px;
			box-shadow: 0 5px 15px rgba(0,0,0,0.1);
			position: relative;
			}

		.event-content h3 {
			color: #B7A374;
			margin-top: 0;
			font-size: 1.4em;
			}
	
		.left {
			float: left;
			text-align: right;
			}

		.right {
			float: right;
			text-align: left;
			}

		.timeline-event::after {
			content: '';
			position: absolute;
			width: 25px;
			height: 25px;
			background-color: #B7A374;
			border: 4px solid #f5f5f5;
			border-radius: 50%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 1;
			}
/*Bis hierhin*/

@media (max-width: 768px) {
    .timeline::before {
        left: 31px;
    }
    
    .timeline-event {
        padding: 20px 0;
    }
    
    .event-date,
    .event-content {
        width: calc(100% - 85px);
        float: right;
    }
    
    .left, .right {
        text-align: left;
        float: none;
        order: 0; 
    }
    
    .timeline-event::after {
        left: 31px;
    }
    
    .event-date {
        font-size: 1.1em;
        padding: 10px 15px 5px;
    }
    
    .event-content {
        padding: 15px;
    }

    .architecture-section {
        flex-direction: column;
    }
    
    .image-container, .text-container {
        width: 100%;
    }
}
