<!DOCTYPE html>
<html lang="de">
    <head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
        <title>OTTEC Technology GmbH - Webservice</title>

		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet">

		<style>
			:root {
				--text-color: #1d2b40;
				--page-bg: #f2f5f8;
				--accent-color: #1880a0;
				--accent-hover: #0e6f91;
				--success-color: #1ca783;
				--card-bg: rgba(255, 255, 255, 0.8);
				--card-border: rgba(212, 222, 230, 0.9);
				--shadow: 0 14px 34px rgba(27, 49, 76, 0.08);
			}

			* {
				box-sizing: border-box;
			}

			body {
				background-color: var(--page-bg);
				font-family: "Manrope", sans-serif;
				color: var(--text-color);
				margin: 0;
				min-height: 100vh;
				text-rendering: optimizeLegibility;
			}

			.page-container {
				position: relative;
				min-height: 100vh;
				padding: 36px 18px 20px;
				background: linear-gradient(155deg, #f4f6f4 0%, #eef3f8 45%, #e8eff5 100%);
				display: flex;
				flex-direction: column;
			}

			.ambient-glow {
				position: absolute;
				border-radius: 50%;
				filter: blur(1px);
				pointer-events: none;
				z-index: 0;
			}

			.ambient-glow.one {
				width: 420px;
				height: 420px;
				top: -220px;
				right: -130px;
				background: radial-gradient(circle, rgba(0, 118, 155, 0.2), rgba(0, 118, 155, 0));
			}

			.ambient-glow.two {
				width: 380px;
				height: 380px;
				bottom: -180px;
				left: -150px;
				background: radial-gradient(circle, rgba(28, 167, 131, 0.14), rgba(28, 167, 131, 0));
			}

			.content-shell {
				position: relative;
				z-index: 1;
				max-width: 1060px;
				margin: 0 auto;
				width: 100%;
				flex: 1;
			}

			.top-bar {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 16px;
				margin-bottom: 26px;
			}

			.app-logo {
				width: 170px;
				max-width: 50vw;
				height: auto;
			}

			.status-pill {
				display: inline-flex;
				align-items: center;
				gap: 8px;
				padding: 8px 14px;
				border-radius: 999px;
				background: rgba(24, 128, 160, 0.12);
				color: #0e5f78;
				font-size: 13px;
				font-weight: 700;
				letter-spacing: 0.03em;
				text-transform: uppercase;
				white-space: nowrap;
			}

			.status-pill::before {
				content: "";
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: var(--success-color);
				box-shadow: 0 0 0 5px rgba(28, 167, 131, 0.16);
			}

			.footer {
				margin-top: 40px;
				padding: 16px 8px;
				color: #5b6b80;
				font-size: 13px;
				text-align: center;
			}

			.footer a {
				color: #1b4e66;
				font-weight: 700;
				text-decoration: none;
				margin: 0 10px;
			}

			.footer a:hover {
				text-decoration: underline;
			}

			@media (max-width: 720px) {
				.page-container {
					padding-top: 24px;
				}

				.top-bar {
					flex-direction: column;
					align-items: center;
					text-align: center;
				}

				.footer {
					display: flex;
					flex-direction: column;
					gap: 12px;
				}
			}
		</style>

			<style>
		.dashboard-grid {
			display: grid;
			grid-template-columns: repeat(12, minmax(0, 1fr));
			gap: 16px;
		}

		.dashboard-card {
			grid-column: span 4;
			border-radius: 20px;
			padding: 24px;
			background: var(--card-bg);
			border: 1px solid var(--card-border);
			box-shadow: var(--shadow);
			backdrop-filter: blur(8px);
			-webkit-backdrop-filter: blur(8px);
			display: flex;
			flex-direction: column;
		}

		.dashboard-card h2 {
			margin: 0 0 16px;
			color: #1d3553;
			font-size: 20px;
			font-weight: 800;
			letter-spacing: -0.01em;
		}

		.dashboard-card p {
			margin: 0;
			color: #4a596f;
			font-size: 15px;
			line-height: 1.6;
		}

		.download-links {
			display: grid;
			gap: 12px;
			margin-top: auto;
			padding-top: 16px;
		}

		.download-links a {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			color: var(--accent-color);
			font-size: 15px;
			font-weight: 700;
			text-decoration: none;
			transition: transform 0.2s ease, color 0.2s ease;
		}

		.download-links a:hover {
			color: var(--accent-hover);
			transform: translateX(4px);
		}

		.download-links a::after {
			content: "→";
			font-weight: 800;
			transition: transform 0.2s ease;
		}

		.download-links a:hover::after {
			transform: translateX(2px);
		}

		.information-note {
			display: inline-block;
			padding: 10px 14px;
			border-radius: 12px;
			background: rgba(24, 128, 160, 0.08);
			border: 1px solid rgba(24, 128, 160, 0.1);
			font-weight: 600;
			color: #13506b;
			font-size: 14px;
		}

		@media (max-width: 940px) {
			.dashboard-card {
				grid-column: span 6;
			}
		}

		@media (max-width: 720px) {
			.dashboard-card {
				grid-column: span 12;
			}
		}
	</style>
	</head>
	<body>
        	<main class="page-container">
		<div class="ambient-glow one"></div>
		<div class="ambient-glow two"></div>

		<div class="content-shell">
			<header class="top-bar">
				<img class="app-logo" src="/images/ottec_logo.png" alt="OTTEC Logo"/>
				<div class="status-pill">Webservice Online</div>
			</header>

			<section class="dashboard-grid">
				<article class="dashboard-card">
					<h2>Webservice</h2>
					<p>Der zentrale Update- und Download-Service ist aktuell erreichbar und einsatzbereit.</p>
				</article>

				<article class="dashboard-card">
					<h2>GPU-Updater</h2>
					<div class="download-links">
						<a href="/gpu/update/download/installer/ottec">Installer für Windows</a>
						<a href="/gpu/update/download/installer/ottec/mac">Installer für macOS</a>
						<a href="/gpu/update/download/installer/ottec/mac_arm">Installer für macOS ARM</a>
					</div>
				</article>

				<article class="dashboard-card">
					<h2>Informationen</h2>
					<p><span class="information-note">Aktuell liegen keine zusätzlichen Hinweise vor.</span></p>
				</article>
			</section>

			<footer class="footer">
				<a href="https://www.ottec.com">Website</a>
				<a href="https://ottec.com/impressum/">Impressum</a>
				<span>&copy; 2026 OTTEC Technology GmbH</span>
			</footer>
		</div>
	</main>
            </body>
</html>
