<!doctype html>
<html>
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>MachMit</title>

  <!-- Theme colors -->
  <meta name="theme-color" content="#3b82f6"/>
  <meta name="msapplication-TileColor" content="#3b82f6"/>

  <!-- Favicons -->
  <link rel="icon" type="image/svg+xml" href="/favicon-180.svg"/>
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png"/>
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>

  <!-- Apple Touch Icon -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>

  <!-- Web App Manifest -->
  <link rel="manifest" href="/manifest.webmanifest"/>

  <!-- Loading Fallback Styles -->
  <style>
    #app-loader {
      position: fixed;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      z-index: 9999;
    }

    .loader-spinner {
      width: 48px;
      height: 48px;
      border: 4px solid #e5e7eb;
      border-top-color: #3b82f6;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .loader-text {
      margin-top: 1.5rem;
      font-size: 1rem;
      color: #6b7280;
    }

    .loader-error {
      display: none;
      max-width: 400px;
      padding: 2rem;
      text-align: center;
    }

    .loader-error.visible {
      display: block;
    }

    .loader-error h1 {
      font-size: 1.25rem;
      font-weight: 600;
      color: #111827;
      margin: 0 0 1rem 0;
    }

    .loader-error p {
      font-size: 0.875rem;
      color: #6b7280;
      margin: 0 0 1.5rem 0;
      line-height: 1.5;
    }

    .loader-error button {
      padding: 0.75rem 1.5rem;
      font-size: 1rem;
      font-weight: 500;
      color: white;
      background: #3b82f6;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
      font-family: inherit;
    }

    .loader-error button:hover {
      background: #2563eb;
    }

    .loader-error button:active {
      background: #1d4ed8;
    }
  </style>
  <script type="module" crossorigin src="/assets/index-DCCWbNzz.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/fileRoute-DGcYgQ_u.js">
  <link rel="modulepreload" crossorigin href="/assets/QueryClientProvider-MKup_lzO.js">
  <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-Ca80NmtZ.js">
  <link rel="modulepreload" crossorigin href="/assets/useBaseQuery-B-UmiegD.js">
  <link rel="stylesheet" crossorigin href="/assets/index-ByH-8cvg.css">
</head>
<body>
<div id="root">
  <!-- Loading Fallback - removed when React mounts -->
  <div id="app-loader">
    <div class="loader-spinner"></div>
    <div class="loader-text">MachMit wird geladen...</div>

    <div class="loader-error" id="loader-error">
      <h1>Ladevorgang fehlgeschlagen</h1>
      <p>
        Die Anwendung konnte nicht geladen werden. Dies kann an einer
        instabilen Internetverbindung oder einem temporären Problem liegen.
      </p>
      <button onclick="window.location.reload()">Seite neu laden</button>
    </div>
  </div>
</div>

<script>
  // Show error message after 8 seconds if React hasn't mounted
  setTimeout(function() {
    var loader = document.getElementById('app-loader');
    var error = document.getElementById('loader-error');
    if (loader && error && document.body.contains(loader)) {
      error.classList.add('visible');
    }
  }, 8000);
</script>

</body>
</html>
