<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{companyName}} - Antwort auf Ihre {{contactTypeString}}</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .email-container {
            background-color: #ffffff;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .logo {
            font-size: 28px;
            font-weight: bold;
            color: #2c5aa0;
            margin-bottom: 10px;
        }
        .subtitle {
            font-size: 18px;
            color: #666;
            margin-bottom: 20px;
        }
        .greeting {
            font-size: 16px;
            margin-bottom: 20px;
        }
        .original-message {
            background-color: #f8f9fa;
            border-left: 4px solid #2c5aa0;
            padding: 15px;
            margin: 20px 0;
            border-radius: 5px;
        }
        .original-message-header {
            font-weight: bold;
            color: #2c5aa0;
            margin-bottom: 10px;
        }
        .admin-response {
            background-color: #fff;
            border: 1px solid #e9ecef;
            padding: 20px;
            margin: 20px 0;
            border-radius: 5px;
            white-space: pre-line;
        }
        .response-header {
            font-weight: bold;
            color: #28a745;
            margin-bottom: 15px;
            font-size: 16px;
        }
        .footer {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #eee;
            text-align: center;
        }
        .footer-text {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }
        .contact-info {
            font-size: 12px;
            color: #999;
        }
        .badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
        }
        .badge-bug { background-color: #dc3545; color: white; }
        .badge-problem { background-color: #fd7e14; color: white; }
        .badge-question { background-color: #17a2b8; color: white; }
        .badge-sales { background-color: #28a745; color: white; }
        .badge-other { background-color: #6c757d; color: white; }
    </style>
</head>
<body>
    <div class="email-container">
        <div class="header">
            <div class="logo">🐍 {{companyName}}</div>
            <div class="subtitle">Antwort auf Ihre {{contactTypeString}}</div>
        </div>

        <div class="greeting">
            Hallo {{contactName}},
        </div>

        <p>Vielen Dank, dass Sie uns kontaktiert haben! Wir haben Ihre Nachricht geprüft und unser Team hat die folgende Antwort vorbereitet.</p>

        <div class="original-message">
            <div class="original-message-header">
                Ihre ursprüngliche Nachricht 
                <span class="badge badge-{{contactTypeBadge}}">{{contactTypeString}}</span>
            </div>
            <div>{{originalMessage}}</div>
        </div>

        <div class="admin-response">
            <div class="response-header">📝 Unsere Antwort:</div>
            <div>{{adminResponse}}</div>
        </div>

        <p>Wenn Sie weitere Fragen haben oder zusätzliche Hilfe benötigen, zögern Sie bitte nicht, uns erneut zu kontaktieren.</p>

        <div class="footer">
            <div class="footer-text">
                Vielen Dank, dass Sie sich für {{companyName}} entschieden haben!
            </div>
            <div class="contact-info">
                Für weitere Unterstützung kontaktieren Sie uns unter {{supportEmail}}<br>
                Dies ist eine automatische Antwort. Bitte antworten Sie nicht direkt auf diese E-Mail.
            </div>
        </div>
    </div>
</body>
</html>
