/* ============================================
 *  styles.css - Private Home Page Stylesheet
 *  Version: 1.0
 *  Erstellt: 10. März 2026
 *  Autor: Master (mit Unterstützung von Lumo)
 *  ============================================ */

/* CSS Custom Properties (Variablen) für einfache Wartung */
:root {
   --bg-color: #f4f4f9;
   --text-color: #333333;
   --accent-color: #2c3e50;
   --card-bg: #ffffff;
   --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   --shadow-color: rgba(0, 0, 0, 0.05);
   --border-color: #c8e6c9;
   --badge-bg: #e8f5e9;
   --badge-text: #2e7d32;
}

/* Modernes CSS Reset */
*, *::before, *::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   margin: 0;
   padding: 0;
   font-family: var(--font-family);
   background-color: var(--bg-color);
   color: var(--text-color);
   line-height: 1.6;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
}

/* Container-Struktur */
.container {
   max-width: 800px;
   width: 90%;
   background: var(--card-bg);
   padding: 2rem;
   border-radius: 12px;
   box-shadow: 0 4px 6px var(--shadow-color);
   text-align: center;
}

/* Typografie */
h1 {
   color: var(--accent-color);
   margin-bottom: 1rem;
   font-weight: 600;
}

p {
   margin-bottom: 1.5rem;
}

/* Sicherheits-Badge */
.secure-badge {
   display: inline-block;
   padding: 0.5rem 1rem;
   background-color: var(--badge-bg);
   color: var(--badge-text);
   border-radius: 20px;
   font-size: 0.85rem;
   font-weight: bold;
   margin-top: 1rem;
   border: 1px solid var(--border-color);
}

/* Verhindert Textauswahl für UI-Elemente */
.no-select {
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media screen and (max-width: 600px) {
   .container {
      padding: 1.5rem;
      width: 95%;
   }

   h1 {
      font-size: 1.5rem;
   }

   p {
      font-size: 0.95rem;
   }
}

/* Dark Mode Support (automatisch basierend auf System-Einstellung) */
@media (prefers-color-scheme: dark) {
   :root {
      --bg-color: #1a1a2e;
      --text-color: #e0e0e0;
      --accent-color: #64ffda;
      --card-bg: #16213e;
      --shadow-color: rgba(0, 0, 0, 0.3);
      --border-color: #0f3460;
      --badge-bg: #0f3460;
      --badge-text: #64ffda;
   }
}

/* Print-Styles (falls Seite gedruckt wird) */
@media print {
   body {
      background: white;
      color: black;
   }

   .container {
      box-shadow: none;
      border: 1px solid #ccc;
   }

   .secure-badge {
      border: 1px solid #000;
   }
}