<!DOCTYPE html>

 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Wiki Startseite</title>
     <style>
         /* Catppuccin Mocha Palette */
         :root {
             --base: #1e1e2e;
             --surface0: #313244;
             --surface1: #45475a;
             --text: #cdd6f4;
             --subtext0: #a6adc8;
             --peach: #fab387;
             --lavender: #b4befe;
             --crust: #11111b;
         }

         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }

         body {
             background-color: var(--base);
             color: var(--text);
             font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
             display: flex;
             flex      justify-content: center;
             align-items: center;
             min-height: 100vh;
             padding: 20px;
         }

         .container {
             max-width: 900px;
             width: 100%;
         }

         header {
             text-align: center;
             margin-bottom: 40px;
         }

         h1 {
             font-size: 2.5rem;
             color: var(--peach);
             letter-spacing: -1px;
         }

         p.subtitle {
             color: var(--subtext0);
             margin-top: 10px;
         }

         .grid {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
             gap: 20px;
         }

         /* Special handling for the 5th tile to look balanced or centered */
         .grid-item:nth-child(5) {
             grid-column: span 2;
         }

         .card {
             background-color: var(--surface0);
             padding: 30px;
             border-radius: 12px;
             text-decoration: none;
             color: inherit;
             transition: transform 0.2s ease, border-color 0.2s ease;
             border: 2px solid transparent;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
             text-align: center;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
         }

         .card:hover {
             transform: translateY(-5px);
             border-color: var(--peach);
         }

         .card h2 {
             font-size: 1.4rem;
             margin-bottom: 10px;
             color: var(--text);
         }

         .card p {
             font-size: 0.95rem;
             color: var(--subtext0);
         }

         /* Icon placeholder style */
         .icon {
             font-size: 2rem;
             margin-bottom: 15px;
             color: var(--peach);
         }

         @media (max-width: 600px) {
             .grid {
                 grid-template-columns: 1fr;
             }
             .grid-item:nth-child(5) {
                 grid-column: span 1;
             }
         }
     </important>
     </style>
 </head>
 <body>

         <header>

Wiki Dashboard

Zentraler Wissensspeicher

         </header>

         <main class="grid">
             <a href="#" class="card grid-item">

👨‍ing

Hilfe für Papa

Anleitungen und Support-Dokumentation

             </a>

             <a href="#" class="card grid-item">

✅

Gelöste Probleme

Archiv der behobenen Fehler und Lösungen

             </a>

             <a href="#" class="card grid-item">

🏆

Wettkämpfe

Ergebnisse, Regeln und Vorbereitungen

             </a>

             <a href="#" class="card grid-item">

🖥️

Server-Infrastruktur

Netzwerk-Setup und Server-Konfigurationen

             </a>

             <a href="#" class="card grid-item">

🤝

Erklärt für Freunde

Einfache Tutorials und Grundlagen-Guides

             </a>
         </main>

 </body>
 </html>