<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <title><?= $mainTitle ?></title>
    <style>
        *, *::before, *::after { box-sizing: border-box; }
        :root {
            --color-bg:      #f4f6f9;
            --color-surface: #ffffff;
            --color-text:    #1a202c;
            --color-muted:   #6b7280;
            --color-accent:  #15779b;
            --color-border:  #e2e8f0;
            --radius:        12px;
            --shadow:        0 4px 24px rgba(0,0,0,.09);
        }
        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            background: var(--color-bg);
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            color: var(--color-text);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .maint-wrapper {
            width: 100%;
            max-width: 500px;
            padding: 1.5rem;
        }
        .maint-card {
            background: var(--color-surface);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 3rem 2.5rem 2.5rem;
            text-align: center;
        }
        .maint-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 64px;
            background: #eaf4f8;
            border-radius: 50%;
            margin-bottom: 1.5rem;
            font-size: 1.75rem;
        }
        .maint-site {
            font-size: .8125rem;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--color-accent);
            margin-bottom: .75rem;
        }
        .maint-title {
            font-size: 1.625rem;
            font-weight: 700;
            line-height: 1.25;
            margin: 0 0 1rem;
            color: var(--color-text);
        }
        .maint-message {
            font-size: 1rem;
            line-height: 1.65;
            color: var(--color-muted);
            margin: 0 0 2rem;
        }
        .maint-divider {
            border: none;
            border-top: 1px solid var(--color-border);
            margin: 0 0 1.25rem;
        }
        .maint-status {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            font-size: .8125rem;
            color: var(--color-muted);
        }
        .maint-dot {
            width: 8px;
            height: 8px;
            background: #f59e0b;
            border-radius: 50%;
            animation: pulse 1.8s ease-in-out infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50%       { opacity: .35; }
        }
        @media (max-width: 480px) {
            .maint-card { padding: 2rem 1.5rem 1.75rem; }
            .maint-title { font-size: 1.375rem; }
        }
    </style>
</head>
<body>
    <div class="maint-wrapper">
        <div class="maint-card">
            <div class="maint-icon">🔧</div>
            <?php
            $esc = fn(string $v): string => htmlspecialchars($v, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
            ?>
            <?php if ($mainSite !== ''): ?>
            <p class="maint-site"><?= $esc($mainSite) ?></p>
            <?php endif; ?>
            <h1 class="maint-title"><?= $esc($mainTitle) ?></h1>
            <p class="maint-message"><?= nl2br($esc($mainMessage)) ?></p>
            <hr class="maint-divider">
            <span class="maint-status">
                <span class="maint-dot"></span>
                Wir sind gleich zurück
            </span>
        </div>
    </div>
</body>
</html>
