<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}Onboarding{% endblock %} – vHTV-Stiftung</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    :root { --gruen: #004225; --gruen-hell: #006837; }
    body { background: #f8f9fa; font-size: 0.95rem; line-height: 1.7; color: #333; }
    .portal-header { background: linear-gradient(135deg, var(--gruen) 0%, var(--gruen-hell) 100%); color: #fff; padding: 1.5rem 0; }
    .portal-header h1 { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.25rem; }
    .portal-header .subtitle { font-size: 0.85rem; opacity: 0.85; }
    .fortschritt-bar { background: rgba(255,255,255,0.2); border-radius: 4px; height: 8px; margin-top: 12px; }
    .fortschritt-fill { background: #fff; border-radius: 4px; height: 8px; transition: width 0.3s; }
    .fortschritt-label { font-size: 0.8rem; opacity: 0.9; margin-top: 4px; }
    .card { border: none; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
    .card-header { background: #e8f4ee; border-bottom: 2px solid var(--gruen); }
    .card-header h2 { font-size: 1.15rem; color: var(--gruen); margin: 0; }
    .btn-weiter { background: var(--gruen); border-color: var(--gruen); }
    .btn-weiter:hover { background: var(--gruen-hell); border-color: var(--gruen-hell); }
    .btn-zurueck { border-color: #aaa; color: #555; }
    .required-mark { color: #c00; }
    .hinweis-box { background: #fff8e1; border-left: 4px solid #f0ad4e; border-radius: 4px; padding: 12px 16px; font-size: 0.9rem; }
    .dse-scroll { max-height: 300px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 4px; padding: 16px; background: #fff; font-size: 0.85rem; }
    .portal-footer { text-align: center; font-size: 0.8rem; color: #aaa; margin-top: 2rem; padding-bottom: 2rem; }
  </style>
</head>
<body>
<div class="portal-header">
  <div class="container">
    <h1>van Hees-Theyssen-Vogel'sche Stiftung</h1>
    <p class="subtitle mb-0">Onboarding-Antrag</p>
    {% block fortschritt %}{% endblock %}
  </div>
</div>
<div class="container py-4">
  <div class="row justify-content-center">
    <div class="col-12 col-md-8 col-lg-7">
      {% block inhalt %}{% endblock %}
    </div>
  </div>
</div>
<div class="portal-footer">van Hees-Theyssen-Vogel'sche Stiftung · Raesfelder Str. 3, 46499 Hamminkeln · Tel. 02858/836780</div>
</body>
</html>
