diff --git a/index.html b/index.html
index 6907b0c..8cbdc66 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,18 @@
 <!--
+MIT-Lizenz
+
+Copyright (c) 2025 Alwin Madhu
+
+Hiermit wird jeder Person, die eine Kopie dieser Software und der zugehörigen Dokumentationsdateien (die "Software") erhält, die Erlaubnis erteilt, uneingeschränkt mit der Software zu verfahren, einschließlich, aber nicht beschränkt auf die Rechte, die Software zu nutzen, zu kopieren, zu modifizieren, zusammenzuführen, zu veröffentlichen, zu verteilen, zu unterlizenzieren und/oder zu verkaufen, und Personen, denen die Software bereitgestellt wird, diese Rechte zu gewähren, vorbehaltlich der folgenden Bedingungen:
+
+Der obige Urheberrechtshinweis und dieser Erlaubnishinweis müssen in allen Kopien oder wesentlichen Teilen der Software enthalten sein.
+
+DIE SOFTWARE WIRD "WIE SIE IST" ZUR VERFÜGUNG GESTELLT, OHNE JEGLICHE AUSDRÜCKLICHE ODER STILLSCHWEIGENDE GARANTIE, EINSCHLIEßLICH, ABER NICHT BESCHRÄNKT AUF DIE GARANTIEN DER HANDELSÜBLICHEN QUALITÄT, DER EIGNUNG FÜR EINEN BESTIMMTEN ZWECK UND DER NICHTVERLETZUNG VON RECHTEN DRITTER. IN KEINEM FALL SIND DIE AUTOREN ODER URHEBERRECHTSINHABER HAFTBAR FÜR JEGLICHE ANSPRÜCHE, SCHÄDEN ODER ANDERE VERPFLICHTUNGEN, SEI ES IN EINEM VERTRAG, EINER UNERLAUBTEN HANDLUNG ODER ANDERWEITIG, DIE AUS, AUS ODER IN VERBINDUNG MIT DER SOFTWARE ODER DER NUTZUNG ODER ANDEREN VERWENDUNG DER SOFTWARE ENTSTEHEN.
+-->
+<!--
 MIT License
 
-Copyright (c) 2025 Alwin
+Copyright (c) 2025 Alwin Madhu
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -23,141 +34,427 @@
 -->
 
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
   <meta name="theme-color" content="#FF6B9D" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="#FF6B9D" />
-  <meta name="description" content="Gentle period companion for tracking your cycle" />
+  <meta name="description" content="Sanfter Begleiter zur Verfolgung deines Zyklus" />
   <link rel="manifest" href="./manifest.json" />
   <link rel="apple-touch-icon" href="./icon-192.png" />
   <link rel="icon" type="image/png" href="alwin.png" />
   <link rel="preload" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" as="style" />
   <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet" async />
-  <title>ROS Cycle — gentle period companion</title>
-  <style>:root{--bg1:#FFF0F5;--bg2:#F0FFF0;--pink:#FF6B9D;--soft:#FFB6C1;--mint:#98D8C8;--text:#3b3b3b;--muted:#8A8A8A;--card:#ffffff;--shadow:0 6px 24px rgba(0,0,0,0.08);--bg-dark:#2b2b2b;--card-dark:#3c3c3c;--text-dark:#f0f0f0;--muted-dark:#b0b0b0;}[data-theme="dark"]{--bg1:#2b2b2b;--bg2:#3c3c3c;--card:#3c3c3c;--text:#f0f0f0;--muted:#b0b0b0;}*{box-sizing:border-box;}html,body{height:100%;}body{font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto;margin:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bg1),var(--bg2));color:var(--text);padding:20px;overscroll-behavior:none;}.app{width:100%;max-width:760px;background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:20px;}header{display:flex;align-items:center;gap:16px;}.logo{font-size:28px;font-weight:800;background:linear-gradient(45deg,var(--pink),var(--soft));-webkit-background-clip:text;color:transparent;}.lead{color:var(--muted);font-weight:300;}.step-indicator{margin:10px 0;font-size:13px;color:var(--muted);text-align:center;}main{margin-top:14px;}.step{display:none;opacity:0;transform:translateY(12px);transition:all .28s ease;}.step.active{display:block;opacity:1;transform:translateY(0);}.card{background:var(--card);border-radius:12px;padding:18px;box-shadow:0 4px 18px rgba(0,0,0,0.04);}.field{margin-bottom:12px;text-align:left;}label{display:block;font-weight:600;margin-bottom:6px;}input[type="text"],input[type="date"],input[type="number"]{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid #f2dce4;background:var(--card);outline:none;color:var(--text);font-size:16px;-webkit-appearance:none;}input:focus{box-shadow:0 6px 20px rgba(255,107,157,0.12);border-color:var(--pink);}.controls{display:flex;gap:10px;justify-content:flex-end;margin-top:10px;}button{cursor:pointer;border:0;padding:10px 16px;border-radius:12px;font-weight:700;font-size:16px;touch-action:manipulation;}.btn-primary{background:linear-gradient(45deg,var(--pink),var(--soft));color:white;}.btn-ghost{background:transparent;color:var(--text);}.month-nav{display:flex;align-items:center;justify-content:space-between;margin:18px 0;}.month-title{font-weight:800;font-size:18px;}.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}.weekday-label{text-align:center;font-size:12px;font-weight:600;color:var(--muted);padding:8px 0;}.cell{background:var(--card);border-radius:10px;padding:10px;min-height:56px;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;border:1px solid #f4f4f4;position:relative;touch-action:manipulation;}.cell.other{background:#fafafa;color:#bbb;}.daynum{font-weight:700;}.badge{position:absolute;right:8px;top:8px;font-size:11px;padding:4px 6px;border-radius:8px;}.period{background:linear-gradient(45deg,var(--pink),#ff9bbf);color:#fff;}.fertile{background:linear-gradient(45deg,var(--mint),#dff6ee);color:var(--text);}.legend{display:flex;gap:12px;margin-top:10px;align-items:center;}.legend .box{width:14px;height:14px;border-radius:4px;}.tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--card);border-radius:10px;padding:8px 10px;box-shadow:0 6px 20px rgba(0,0,0,0.12);white-space:nowrap;font-size:13px;color:var(--text);display:none;z-index:10;}.cell:hover .tooltip,.cell:focus-within .tooltip{display:block;}@media (max-width:768px){header{flex-direction:column;padding:12px 20px;}nav a{margin:8px;font-size:0.9rem;}.hero h1{font-size:2.2rem;}section{padding:80px 20px;}.loader h1{font-size:1.2rem;}.loader .spinner{width:14px;height:14px;}.tooltip{bottom:auto;top:100%;transform:translateX(-50%);white-space:normal;max-width:90vw;}.grid{gap:6px;}.cell{min-height:64px;}header{gap:10px;}}.modal{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.45);display:flex;justify-content:center;align-items:center;z-index:60;display:none;}.modal.active{display:flex;}.modal .box{background:var(--card);padding:18px;border-radius:12px;max-width:420px;box-shadow:0 10px 40px rgba(0,0,0,0.18);width:90%;}footer{margin-top:16px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}.theme-toggle{font-size:12px;cursor:pointer;color:var(--pink);}.checkbox-field{display:flex;align-items:center;gap:8px;margin-bottom:8px;}.checkbox-field input[type="checkbox"]{width:18px;height:18px;accent-color:var(--pink);}a.github-link,a.portfolio-link{color:var(--pink);text-decoration:none;font-weight:600;}a.github-link:hover,a.portfolio-link:hover{text-decoration:underline;}</style>
+  <title>ROS Zyklus — sanfter Begleiter für deinen Zyklus</title>
+  <style>
+    :root {
+      --bg1: #FFF0F5;
+      --bg2: #F0FFF0;
+      --pink: #FF6B9D;
+      --soft: #FFB6C1;
+      --mint: #98D8C8;
+      --text: #3b3b3b;
+      --muted: #8A8A8A;
+      --card: #ffffff;
+      --shadow: 0 6px 24px rgba(0,0,0,0.08);
+      --bg-dark: #2b2b2b;
+      --card-dark: #3c3c3c;
+      --text-dark: #f0f0f0;
+      --muted-dark: #b0b0b0;
+    }
+    [data-theme="dark"] {
+      --bg1: #2b2b2b;
+      --bg2: #3c3c3c;
+      --card: #3c3c3c;
+      --text: #f0f0f0;
+      --muted: #b0b0b0;
+    }
+    * { box-sizing: border-box; }
+    html, body { height: 100%; }
+    body {
+      font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(135deg, var(--bg1), var(--bg2));
+      color: var(--text);
+      padding: 20px;
+      overscroll-behavior: none;
+    }
+    .app {
+      width: 100%;
+      max-width: 760px;
+      background: var(--card);
+      border-radius: 18px;
+      box-shadow: var(--shadow);
+      padding: 20px;
+    }
+    header {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+    .logo {
+      font-size: 28px;
+      font-weight: 800;
+      background: linear-gradient(45deg, var(--pink), var(--soft));
+      -webkit-background-clip: text;
+      color: transparent;
+    }
+    .lead {
+      color: var(--muted);
+      font-weight: 300;
+    }
+    .step-indicator {
+      margin: 10px 0;
+      font-size: 13px;
+      color: var(--muted);
+      text-align: center;
+    }
+    main { margin-top: 14px; }
+    .step {
+      display: none;
+      opacity: 0;
+      transform: translateY(12px);
+      transition: all .28s ease;
+    }
+    .step.active {
+      display: block;
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .card {
+      background: var(--card);
+      border-radius: 12px;
+      padding: 18px;
+      box-shadow: 0 4px 18px rgba(0,0,0,0.04);
+    }
+    .field {
+      margin-bottom: 12px;
+      text-align: left;
+    }
+    label {
+      display: block;
+      font-weight: 600;
+      margin-bottom: 6px;
+    }
+    input[type="text"], input[type="date"], input[type="number"] {
+      width: 100%;
+      padding: 12px 14px;
+      border-radius: 10px;
+      border: 1.5px solid #f2dce4;
+      background: var(--card);
+      outline: none;
+      color: var(--text);
+      font-size: 16px;
+      -webkit-appearance: none;
+    }
+    input:focus {
+      box-shadow: 0 6px 20px rgba(255,107,157,0.12);
+      border-color: var(--pink);
+    }
+    .controls {
+      display: flex;
+      gap: 10px;
+      justify-content: flex-end;
+      margin-top: 10px;
+    }
+    button {
+      cursor: pointer;
+      border: 0;
+      padding: 10px 16px;
+      border-radius: 12px;
+      font-weight: 700;
+      font-size: 16px;
+      touch-action: manipulation;
+    }
+    .btn-primary {
+      background: linear-gradient(45deg, var(--pink), var(--soft));
+      color: white;
+    }
+    .btn-ghost {
+      background: transparent;
+      color: var(--text);
+    }
+    .month-nav {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 18px 0;
+    }
+    .month-title {
+      font-weight: 800;
+      font-size: 18px;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 8px;
+    }
+    .weekday-label {
+      text-align: center;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--muted);
+      padding: 8px 0;
+    }
+    .cell {
+      background: var(--card);
+      border-radius: 10px;
+      padding: 10px;
+      min-height: 56px;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      flex-direction: column;
+      border: 1px solid #f4f4f4;
+      position: relative;
+      touch-action: manipulation;
+    }
+    .cell.other {
+      background: #fafafa;
+      color: #bbb;
+    }
+    .daynum { font-weight: 700; }
+    .badge {
+      position: absolute;
+      right: 8px;
+      top: 8px;
+      font-size: 11px;
+      padding: 4px 6px;
+      border-radius: 8px;
+    }
+    .period {
+      background: linear-gradient(45deg, var(--pink), #ff9bbf);
+      color: #fff;
+    }
+    .fertile {
+      background: linear-gradient(45deg, var(--mint), #dff6ee);
+      color: var(--text);
+    }
+    .legend {
+      display: flex;
+      gap: 12px;
+      margin-top: 10px;
+      align-items: center;
+    }
+    .legend .box {
+      width: 14px;
+      height: 14px;
+      border-radius: 4px;
+    }
+    .tooltip {
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--card);
+      border-radius: 10px;
+      padding: 8px 10px;
+      box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+      white-space: nowrap;
+      font-size: 13px;
+      color: var(--text);
+      display: none;
+      z-index: 10;
+    }
+    .cell:hover .tooltip, .cell:focus-within .tooltip { display: block; }
+    @media (max-width: 768px) {
+      header { flex-direction: column; padding: 12px 20px; }
+      nav a { margin: 8px; font-size: 0.9rem; }
+      .hero h1 { font-size: 2.2rem; }
+      section { padding: 80px 20px; }
+      .loader h1 { font-size: 1.2rem; }
+      .loader .spinner { width: 14px; height: 14px; }
+      .tooltip {
+        bottom: auto;
+        top: 100%;
+        transform: translateX(-50%);
+        white-space: normal;
+        max-width: 90vw;
+      }
+      .grid { gap: 6px; }
+      .cell { min-height: 64px; }
+      header { gap: 10px; }
+    }
+    .modal {
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0,0,0,0.45);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 60;
+      display: none;
+    }
+    .modal.active { display: flex; }
+    .modal .box {
+      background: var(--card);
+      padding: 18px;
+      border-radius: 12px;
+      max-width: 420px;
+      box-shadow: 0 10px 40px rgba(0,0,0,0.18);
+      width: 90%;
+    }
+    footer {
+      margin-top: 16px;
+      font-size: 13px;
+      color: var(--muted);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+    .theme-toggle {
+      font-size: 12px;
+      cursor: pointer;
+      color: var(--pink);
+    }
+    .checkbox-field {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+    .checkbox-field input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      accent-color: var(--pink);
+    }
+    a.github-link, a.portfolio-link {
+      color: var(--pink);
+      text-decoration: none;
+      font-weight: 600;
+    }
+    a.github-link:hover, a.portfolio-link:hover { text-decoration: underline; }
+  </style>
 </head>
 <body>
-  <div class="app" role="application" aria-label="ROS Cycle period tracker">
+  <div class="app" role="application" aria-label="ROS Zyklus-Tracker">
     <header>
-      <div class="logo">🌸 ROS Cycle</div>
+      <div class="logo">🌸 ROS Zyklus</div>
       <div>
-        <div class="lead">Gentle, private & student-friendly</div>
-        <div style="font-size:12px;color:var(--muted)">No data stored. Local only for this demo.</div>
+        <div class="lead">Sanft, privat & student*innenfreundlich</div>
+        <div style="font-size:12px;color:var(--muted)">Keine Daten gespeichert. Nur lokal für diese Demo.</div>
       </div>
     </header>
 
     <main aria-live="polite">
-      <!-- Step 1: basic info -->
+      <!-- Schritt 1: Grundinformationen -->
       <section class="step active" id="step-1">
-        <div class="step-indicator">Step 1 of 4</div>
+        <div class="step-indicator">Schritt 1 von 4</div>
         <div class="card">
-          <h3 style="margin:0 0 8px">Hello — let's make this simple ✨</h3>
-          <p style="margin:0 0 12px;color:var(--muted)">We will ask just a few friendly questions. You can go back anytime.</p>
+          <h3 style="margin:0 0 8px">Hallo — machen wir es einfach ✨</h3>
+          <p style="margin:0 0 12px;color:var(--muted)">Wir stellen dir nur ein paar freundliche Fragen. Du kannst jederzeit zurück.</p>
           <div class="field">
             <label for="name">Name</label>
-            <input id="name" type="text" placeholder="How should I call you?" autocomplete="name" aria-label="Name" />
+            <input id="name" type="text" placeholder="Wie soll ich dich nennen?" autocomplete="name" aria-label="Name" />
           </div>
           <div class="field">
-            <label for="dob">Date of birth <span style="font-weight:400;color:var(--muted);font-size:13px">(used only for age guidance)</span></label>
-            <input id="dob" type="date" aria-label="Date of birth" />
-            <div style="font-size:12px;color:var(--muted);margin-top:6px">If you prefer, you can enter your age instead.</div>
+            <label for="dob">Geburtsdatum <span style="font-weight:400;color:var(--muted);font-size:13px">(nur für Altersrichtlinien)</span></label>
+            <input id="dob" type="date" aria-label="Geburtsdatum" />
+            <div style="font-size:12px;color:var(--muted);margin-top:6px">Falls du möchtest, kannst du stattdessen dein Alter eingeben.</div>
           </div>
           <div class="controls" style="justify-content: space-between;">
-            <button class="btn-ghost" onclick="skipInfo()">Skip</button>
+            <button class="btn-ghost" onclick="skipInfo()">Überspringen</button>
             <div>
-              <button class="btn-primary" onclick="nextToPCOD()" style="margin-right: 10px;">Check for PCOD</button>
-              <button class="btn-primary" onclick="nextToStep2()" id="step1-next">Continue</button>
+              <button class="btn-primary" onclick="nextToPCOD()" style="margin-right: 10px;">Auf PCO-Syndrom prüfen</button>
+              <button class="btn-primary" onclick="nextToStep2()" id="step1-next">Weiter</button>
             </div>
           </div>
         </div>
       </section>
 
-      <!-- Step 2: PCOD Symptom Checker -->
+      <!-- Schritt 2: PCO-Syndrom-Symptomprüfung -->
       <section class="step" id="step-pcod">
-        <div class="step-indicator">Step 2 of 4</div>
+        <div class="step-indicator">Schritt 2 von 4</div>
         <div class="card">
-          <h3 style="margin:0 0 8px">Check for Possible PCOD Symptoms</h3>
-          <p style="margin:0 0 12px;color:var(--muted)">Answer these questions about common symptoms. This is not a medical diagnosis—consult a doctor for advice.</p>
-          <form id="pcod-form" role="form" aria-label="PCOD symptom checker">
+          <h3 style="margin:0 0 8px">Prüfung auf mögliche PCO-Syndrom-Symptome</h3>
+          <p style="margin:0 0 12px;color:var(--muted)">Beantworte diese Fragen zu häufigen Symptomen. Dies ist keine medizinische Diagnose — bitte konsultiere einen Arzt für eine Beratung.</p>
+          <form id="pcod-form" role="form" aria-label="PCO-Syndrom-Symptomprüfung">
             <div class="checkbox-field">
-              <input type="checkbox" id="symptom1" aria-label="Irregular or missed periods" />
-              <label for="symptom1">Irregular or missed periods</label>
+              <input type="checkbox" id="symptom1" aria-label="Unregelmäßige oder ausbleibende Perioden" />
+              <label for="symptom1">Unregelmäßige oder ausbleibende Perioden</label>
             </div>
             <div class="checkbox-field">
-              <input type="checkbox" id="symptom2" aria-label="Excess facial or body hair" />
-              <label for="symptom2">Excess facial or body hair</label>
+              <input type="checkbox" id="symptom2" aria-label="Übermäßige Gesichts- oder Körperbehaarung" />
+              <label for="symptom2">Übermäßige Gesichts- oder Körperbehaarung</label>
             </div>
             <div class="checkbox-field">
-              <input type="checkbox" id="symptom3" aria-label="Acne or oily skin" />
-              <label for="symptom3">Acne or oily skin</label>
+              <input type="checkbox" id="symptom3" aria-label="Akne oder fettige Haut" />
+              <label for="symptom3">Akne oder fettige Haut</label>
             </div>
             <div class="checkbox-field">
-              <input type="checkbox" id="symptom4" aria-label="Difficulty getting pregnant" />
-              <label for="symptom4">Difficulty getting pregnant</label>
+              <input type="checkbox" id="symptom4" aria-label="Schwierigkeiten, schwanger zu werden" />
+              <label for="symptom4">Schwierigkeiten, schwanger zu werden</label>
             </div>
             <div class="checkbox-field">
-              <input type="checkbox" id="symptom5" aria-label="Weight gain or difficulty losing weight" />
-              <label for="symptom5">Weight gain or difficulty losing weight</label>
+              <input type="checkbox" id="symptom5" aria-label="Gewichtszunahme oder Schwierigkeiten beim Abnehmen" />
+              <label for="symptom5">Gewichtszunahme oder Schwierigkeiten beim Abnehmen</label>
             </div>
             <div class="checkbox-field">
-              <input type="checkbox" id="symptom6" aria-label="Thinning hair on the scalp" />
-              <label for="symptom6">Thinning hair on the scalp</label>
+              <input type="checkbox" id="symptom6" aria-label="Dünner werdendes Haar auf der Kopfhaut" />
+              <label for="symptom6">Dünner werdendes Haar auf der Kopfhaut</label>
             </div>
             <div class="checkbox-field">
-              <input type="checkbox" id="symptom7" aria-label="Darkening of skin" />
-              <label for="symptom7">Darkening of skin (e.g., neck, groin)</label>
+              <input type="checkbox" id="symptom7" aria-label="Dunkelverfärbung der Haut" />
+              <label for="symptom7">Dunkelverfärbung der Haut (z.B. Hals, Leiste)</label>
             </div>
             <div class="checkbox-field">
-              <input type="checkbox" id="symptom8" aria-label="Skin tags" />
-              <label for="symptom8">Skin tags</label>
+              <input type="checkbox" id="symptom8" aria-label="Hautanhängsel" />
+              <label for="symptom8">Hautanhängsel</label>
             </div>
             <div class="checkbox-field">
-              <input type="checkbox" id="symptom9" aria-label="Pelvic pain" />
-              <label for="symptom9">Pelvic pain</label>
+              <input type="checkbox" id="symptom9" aria-label="Beckenschmerzen" />
+              <label for="symptom9">Beckenschmerzen</label>
             </div>
             <div class="checkbox-field">
-              <input type="checkbox" id="symptom10" aria-label="Fatigue or low energy" />
-              <label for="symptom10">Fatigue or low energy</label>
+              <input type="checkbox" id="symptom10" aria-label="Müdigkeit oder geringe Energie" />
+              <label for="symptom10">Müdigkeit oder geringe Energie</label>
             </div>
             <div class="controls">
-              <button class="btn-ghost" onclick="showStep(1)">← Back</button>
-              <button class="btn-primary" type="button" onclick="checkPCOD()">Submit</button>
+              <button class="btn-ghost" onclick="showStep(1)">← Zurück</button>
+              <button class="btn-primary" type="button" onclick="checkPCOD()">Absenden</button>
             </div>
           </form>
         </div>
       </section>
 
-      <!-- Step 3: period details -->
+      <!-- Schritt 3: Periodendetails -->
       <section class="step" id="step-2">
-        <div class="step-indicator">Step 3 of 4</div>
+        <div class="step-indicator">Schritt 3 von 4</div>
         <div class="card">
-          <h3 style="margin:0 0 8px">Period details</h3>
-          <p style="margin:0 0 12px;color:var(--muted)">Just one last step — this is used to create friendly estimates.</p>
+          <h3 style="margin:0 0 8px">Periodendetails</h3>
+          <p style="margin:0 0 12px;color:var(--muted)">Nur noch ein letzter Schritt — dies dient zur Erstellung freundlicher Schätzungen.</p>
           <div class="field">
-            <label for="last">When did your last period start?</label>
-            <input id="last" type="date" aria-label="Last period date" />
+            <label for="last">Wann begann deine letzte Periode?</label>
+            <input id="last" type="date" aria-label="Datum der letzten Periode" />
           </div>
           <div class="field">
-            <label for="cycle">Average cycle length (days)</label>
-            <input id="cycle" type="number" min="15" max="45" value="28" aria-label="Cycle length" />
+            <label for="cycle">Durchschnittliche Zykluslänge (Tage)</label>
+            <input id="cycle" type="number" min="15" max="45" value="28" aria-label="Zykluslänge" />
           </div>
           <div class="field">
-            <label for="periodLen">Average period length (days)</label>
-            <input id="periodLen" type="number" min="3" max="10" value="5" aria-label="Period length" />
+            <label for="periodLen">Durchschnittliche Periodenlänge (Tage)</label>
+            <input id="periodLen" type="number" min="3" max="10" value="5" aria-label="Periodenlänge" />
           </div>
           <div class="controls">
-            <button class="btn-ghost" onclick="showStep('pcod')">← Back</button>
-            <button class="btn-primary" onclick="createCalendar()">Create my calendar</button>
+            <button class="btn-ghost" onclick="showStep('pcod')">← Zurück</button>
+            <button class="btn-primary" onclick="createCalendar()">Meinen Kalender erstellen</button>
           </div>
         </div>
       </section>
 
-      <!-- Step 4: calendar -->
+      <!-- Schritt 4: Kalender -->
       <section class="step" id="step-3">
-        <div class="step-indicator">Step 4 of 4</div>
+        <div class="step-indicator">Schritt 4 von 4</div>
         <div class="card">
           <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px">
             <div>
@@ -165,71 +462,351 @@ <h3 style="margin:0 0 8px">Period details</h3>
               <div style="font-size:13px;color:var(--muted)" id="age-note"></div>
             </div>
             <div style="text-align:right">
-              <div style="font-size:12px;color:var(--muted)">Predicted months: <span id="pred-count">0</span></div>
-              <div style="font-size:12px;color:var(--muted)">Visible: <span id="visible-month"></span></div>
+              <div style="font-size:12px;color:var(--muted)">Vorhergesagte Monate: <span id="pred-count">0</span></div>
+              <div style="font-size:12px;color:var(--muted)">Sichtbar: <span id="visible-month"></span></div>
             </div>
           </div>
           <div class="month-nav">
-            <button class="btn-ghost" aria-label="Previous month" id="prevBtn">←</button>
-            <div class="month-title" id="monthTitle">Month</div>
-            <button class="btn-ghost" aria-label="Next month" id="nextBtn">→</button>
+            <button class="btn-ghost" aria-label="Vorheriger Monat" id="prevBtn">←</button>
+            <div class="month-title" id="monthTitle">Monat</div>
+            <button class="btn-ghost" aria-label="Nächster Monat" id="nextBtn">→</button>
           </div>
           <div class="grid" id="weekdayLabels" style="grid-template-columns: repeat(7, 1fr);">
-            <div class="weekday-label">Sun</div>
-            <div class="weekday-label">Mon</div>
-            <div class="weekday-label">Tue</div>
-            <div class="weekday-label">Wed</div>
-            <div class="weekday-label">Thu</div>
-            <div class="weekday-label">Fri</div>
-            <div class="weekday-label">Sat</div>
+            <div class="weekday-label">So</div>
+            <div class="weekday-label">Mo</div>
+            <div class="weekday-label">Di</div>
+            <div class="weekday-label">Mi</div>
+            <div class="weekday-label">Do</div>
+            <div class="weekday-label">Fr</div>
+            <div class="weekday-label">Sa</div>
           </div>
-          <div class="grid" id="calendarGrid" role="grid" aria-label="Calendar grid"></div>
+          <div class="grid" id="calendarGrid" role="grid" aria-label="Kalendergitter"></div>
           <div class="legend">
-            <div style="display:flex;align-items:center;gap:8px"><div class="box period"></div> Period</div>
-            <div style="display:flex;align-items:center;gap:8px"><div class="box fertile"></div> Fertile</div>
+            <div style="display:flex;align-items:center;gap:8px"><div class="box period"></div> Periode</div>
+            <div style="display:flex;align-items:center;gap:8px"><div class="box fertile"></div> Fruchtbar</div>
           </div>
           <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px">
-            <button class="btn-ghost" onclick="showStep(2)">Update</button>
-            <button class="btn-primary" onclick="showResetModal()">Start Over</button>
+            <button class="btn-ghost" onclick="showStep(2)">Aktualisieren</button>
+            <button class="btn-primary" onclick="showResetModal()">Von vorne beginnen</button>
           </div>
         </div>
-        <p style="margin-top:8px;font-size:13px;color:var(--muted)">⚠️ This is an open-source, student-built prototype for educational purposes. Predictions are estimates based on average cycle data and may vary due to factors like diet, hormonal changes, or stress. Not medically approved. <a href="https://github.com/alwin-m/ROS-Cycle-Project" class="github-link" target="_blank" rel="noopener" aria-label="Contribute to ROS Cycle on GitHub">Contribute to our GitHub</a> to help improve accuracy!</p>
+        <p style="margin-top:8px;font-size:13px;color:var(--muted)">⚠️ Dies ist ein Open-Source-Prototyp, entwickelt von Studierenden für Bildungszwecke. Vorhersagen sind Schätzungen basierend auf durchschnittlichen Zyklusdaten und können aufgrund von Faktoren wie Ernährung, hormonellen Veränderungen oder Stress variieren. Nicht medizinisch zugelassen. <a href="https://github.com/alwin-m/ROS-Cycle-Project" class="github-link" target="_blank" rel="noopener" aria-label="Beitragen zu ROS Zyklus auf GitHub">Beitrage zu unserem GitHub</a>, um die Genauigkeit zu verbessern!</p>
       </section>
     </main>
 
     <footer>
       <div style="font-size:12px;color:var(--muted)">
-        Open-source • MIT License • <a href="https://github.com/alwin-m/ROS-Cycle-Project" class="github-link" target="_blank" rel="noopener" aria-label="Visit ROS Cycle GitHub repository">GitHub</a> • <a href="https://alwin-m.github.io/Portfolio/" class="portfolio-link" target="_blank" rel="noopener" aria-label="Visit Alwin Madhu's Portfolio">Portfolio</a>
+        Open-Source • MIT-Lizenz • <a href="https://github.com/alwin-m/ROS-Cycle-Project" class="github-link" target="_blank" rel="noopener" aria-label="ROS Zyklus GitHub-Repository besuchen">GitHub</a> • <a href="https://alwin-m.github.io/Portfolio/" class="portfolio-link" target="_blank" rel="noopener" aria-label="Alwin Madhus Portfolio besuchen">Portfolio</a>
       </div>
       <div style="display:flex;gap:12px">
-        <div class="theme-toggle" onclick="toggleTheme()">Toggle Dark Mode</div>
-        <div style="font-size:12px;color:var(--muted)">Made for students • Privacy-first</div>
+        <div class="theme-toggle" onclick="toggleTheme()">Dunkelmodus umschalten</div>
+        <div style="font-size:12px;color:var(--muted)">Für Studierende gemacht • Datenschutz an erster Stelle</div>
       </div>
     </footer>
   </div>
 
-  <!-- modal for warnings/details -->
+  <!-- Modal für Warnungen/Details -->
   <div class="modal" id="modal" role="dialog" aria-modal="true" aria-labelledby="modalText">
     <div class="box">
       <div id="modalText" role="alert"></div>
       <div style="text-align:right;margin-top:12px;display:flex;gap:10px;justify-content:flex-end">
         <button class="btn-ghost" onclick="closeModal()">OK</button>
-        <button class="btn-primary" onclick="closeModal()">Check My Periods</button>
+        <button class="btn-primary" onclick="closeModal()">Meine Perioden prüfen</button>
       </div>
     </div>
   </div>
 
-  <!-- reset confirmation modal -->
+  <!-- Bestätigungsmodal für Zurücksetzen -->
   <div class="modal" id="resetModal" role="dialog" aria-modal="true" aria-labelledby="resetModalText">
     <div class="box">
-      <div id="resetModalText">Start over? This will clear the current session.</div>
+      <div id="resetModalText">Von vorne beginnen? Dies wird die aktuelle Sitzung löschen.</div>
       <div style="text-align:right;margin-top:12px">
-        <button class="btn-ghost" onclick="closeModal('resetModal')">Cancel</button>
-        <button class="btn-primary" onclick="resetAll()">Confirm</button>
+        <button class="btn-ghost" onclick="closeModal('resetModal')">Abbrechen</button>
+        <button class="btn-primary" onclick="resetAll()">Bestätigen</button>
       </div>
     </div>
   </div>
 
-  <script>let state={name:'',dob:null,age:null,last:null,cycle:28,periodLen:5,months:[],visibleIndex:0,pcodChance:null,pcodSymptoms:[]};const el=id=>document.getElementById(id);function showStep(n){document.querySelectorAll('.step').forEach(s=>s.classList.remove('active'));if(typeof n==='string'){el('step-'+n).classList.add('active');}else{el('step-'+n).classList.add('active');}const firstInput=typeof n==='string'?el('step-'+n).querySelector('input, button'):el('step-'+n).querySelector('input, button');if(firstInput)firstInput.focus();}function showModal(msg){el('modalText').innerHTML=msg.replace(/\n\n/g,'<br><br>').replace(/https:\/\/github\.com\/alwin-m\/ROS-Cycle-Project/g,'<a href="https://github.com/alwin-m/ROS-Cycle-Project" class="github-link" target="_blank" rel="noopener" aria-label="Contribute to ROS Cycle on GitHub">GitHub</a>');el('modal').classList.add('active');el('modal').querySelector('.btn-ghost').focus();}function closeModal(id='modal'){el(id).classList.remove('active');if(id==='modal'&&document.querySelector('#step-pcod.active')){showStep(2);}}function showResetModal(){el('resetModal').classList.add('active');el('resetModal').querySelector('button').focus();}function resetAll(){state={name:'',dob:null,age:null,last:null,cycle:28,periodLen:5,months:[],visibleIndex:0,pcodChance:null,pcodSymptoms:[]};el('name').value='';el('dob').value='';el('last').value='';el('cycle').value='28';el('periodLen').value='5';el('calendarGrid').innerHTML='';el('monthTitle').innerText='Month';el('pcod-form').reset();closeModal('resetModal');showStep(1);}function skipInfo(){state.name='';state.dob=null;state.age=null;showStep(2);}function nextToStep2(){const name=el('name').value.trim();const dob=el('dob').value;if(name==='')return showModal('Please enter your name — a short nickname is fine.');state.name=name;if(dob){const parsed=new Date(dob);if(isNaN(parsed))return showModal('Invalid date of birth. Please use YYYY-MM-DD format.');const age=calculateAge(parsed);if(age<9||age>55){return showModal('Age appears to be ' + age + ', which is outside the typical range (9–55). If correct, proceed; otherwise, check your input.');}state.dob=parsed;state.age=age;}showStep(2);setTimeout(()=>el('last').focus(),200);}function nextToPCOD(){const name=el('name').value.trim();const dob=el('dob').value;if(name==='')return showModal('Please enter your name — a short nickname is fine.');state.name=name;if(dob){const parsed=new Date(dob);if(isNaN(parsed))return showModal('Invalid date of birth. Please use YYYY-MM-DD format.');const age=calculateAge(parsed);if(age<9||age>55){return showModal('Age appears to be ' + age + ', which is outside the typical range (9–55). If correct, proceed; otherwise, check your input.');}state.dob=parsed;state.age=age;}showStep('pcod');setTimeout(()=>el('symptom1').focus(),200);}function checkPCOD(){const symptoms=document.querySelectorAll('#pcod-form input[type="checkbox"]:checked');state.pcodSymptoms=Array.from(symptoms).map(s=>s.nextElementSibling.textContent);const count=symptoms.length;let chance='low';let message='';if(count<=2){chance='low';message=`Based on your responses, there is a low chance you have PCOD.`;}else if(count<=5){chance='medium';message=`Based on your responses, there is a medium chance you have PCOD. Consider seeing a doctor.`;}else{chance='high';message=`Based on your responses, there is a high chance you have PCOD. You should consider seeing a doctor for proper diagnosis.\n\n⚠️ Warning: PCOD can cause irregular cycles, which may reduce the accuracy of period predictions in this app. Predictions are estimates based on average cycle data and may vary due to factors like diet, stress, hormonal changes, or other influences. This is an open-source prototype, and we’re working to improve accuracy. Contribute to our https://github.com/alwin-m/ROS-Cycle-Project to help enhance features, like AI-driven predictions!`;}if(state.pcodSymptoms.length>0){message+=`<br><br><strong>Selected Symptoms:</strong><ul style="margin:10px 0;padding-left:20px;">${state.pcodSymptoms.map(s=>`<li>${s}</li>`).join('')}</ul>`;}else{message+=`<br><br>No symptoms selected.`;}message+=`<br>This is not a medical diagnosis—please consult a healthcare professional.`;state.pcodChance=chance;showModal(message);}function calculateAge(dob){const diff=Date.now()-dob.getTime();return Math.floor(diff/(1000*60*60*24*365.25));}function createCalendar(){const lastVal=el('last').value;const cycleVal=parseInt(el('cycle').value,10);const periodLenVal=parseInt(el('periodLen').value,10);if(!lastVal)return showModal('Please select your last period date.');if(isNaN(cycleVal)||cycleVal<15||cycleVal>45){return showModal('Cycle length should be between 15 and 45 days. If outside this range, consult a healthcare provider.');}if(isNaN(periodLenVal)||periodLenVal<3||periodLenVal>10){return showModal('Period length should be between 3 and 10 days.');}const last=new Date(lastVal);if(isNaN(last))return showModal('Invalid period start date. Please use YYYY-MM-DD format.');if(last>new Date())return showModal('Last period date cannot be in the future.');state.last=new Date(last.getFullYear(),last.getMonth(),last.getDate());state.cycle=cycleVal;state.periodLen=periodLenVal;state.months=[];state.visibleIndex=0;generateMonth(state.visibleIndex);renderMonth(state.visibleIndex);showStep(3);}function generateMonth(index){if(state.months[index])return;const start=new Date(state.last.getFullYear(),state.last.getMonth(),1);const oneDay=24*60*60*1000;const mm=new Date(start.getFullYear(),start.getMonth()+index,1);const days=new Date(mm.getFullYear(),mm.getMonth()+1,0).getDate();const monthObj={month:mm.getMonth(),year:mm.getFullYear(),days:[]};for(let d=1;d<=days;d++){const date=new Date(mm.getFullYear(),mm.getMonth(),d);const diffDays=Math.round((date-state.last)/oneDay);let type='normal';if(diffDays>=0){const mod=Math.abs(diffDays % state.cycle);if(mod<state.periodLen)type='period';const ovulationIndex=state.cycle-14;const fertileStart=ovulationIndex-5;if(mod>=fertileStart&&mod<=ovulationIndex)type=(type==='period')?'period':'fertile';}monthObj.days.push({date,type});}state.months[index]=monthObj;}function renderMonth(index){if(index<0||index>=12)return showModal('No prediction available for this month. We only predict 12 months.');generateMonth(index);const monthObj=state.months[index];el('monthTitle').innerText=`${getMonthName(monthObj.month)} ${monthObj.year}`;el('pred-count').innerText=12;el('visible-month').innerText=`${index + 1}/12`;el('greeting').innerText=`Hi ${state.name || 'there'} — your calendar:`;el('age-note').innerText=state.age ? `Age: ${state.age}${state.pcodChance ? `, PCOD Chance: ${state.pcodChance.charAt(0).toUpperCase() + state.pcodChance.slice(1)}` : ''}` : state.pcodChance ? `PCOD Chance: ${state.pcodChance.charAt(0).toUpperCase() + state.pcodChance.slice(1)}` : '';const grid=el('calendarGrid');grid.innerHTML='';const firstDay=new Date(monthObj.year, monthObj.month, 1);const startOffset=firstDay.getDay();const daysInMonth=monthObj.days.length;const totalCells=Math.ceil((startOffset + daysInMonth) / 7) * 7;for(let i=0;i<totalCells;i++){const cell=document.createElement('div');cell.className='cell';if(i<startOffset||i>=startOffset+daysInMonth){cell.className+=' other';cell.innerHTML=`<div class="daynum">-</div>`;}else{const dayIndex=i-startOffset;const day=monthObj.days[dayIndex];const dateStr=day.date.toISOString().split('T')[0];cell.innerHTML=`<div class="daynum">${day.date.getDate()}</div>`;if(day.type!=='normal'){cell.innerHTML+=`<div class="badge ${day.type}">${day.type==='period' ? 'Period' : 'Fertile'}</div>`;const tip=document.createElement('div');tip.className='tooltip';tip.innerText=`${day.type === 'period' ? 'Period' : 'Fertile'} day: ${dateStr}`;cell.appendChild(tip);}}cell.tabIndex=0;grid.appendChild(cell);}}function getMonthName(month){const names=['January','February','March','April','May','June','July','August','September','October','November','December'];return names[month];}function toggleTheme(){const isDark=document.documentElement.getAttribute('data-theme')==='dark';document.documentElement.setAttribute('data-theme',isDark ? 'light' : 'dark');localStorage.setItem('theme',isDark ? 'light' : 'dark');}el('prevBtn').addEventListener('click',()=>{state.visibleIndex = Math.max(0, state.visibleIndex - 1);renderMonth(state.visibleIndex);});el('nextBtn').addEventListener('click',()=>{state.visibleIndex = Math.min(11, state.visibleIndex + 1);renderMonth(state.visibleIndex);});function setMaxDates(){const today = new Date().toISOString().split('T')[0];el('dob').max=today;el('last').max=today;}document.addEventListener('keydown',(e)=>{if(e.key==='Escape'&&el('modal').classList.contains('active')){closeModal();}else if(e.key==='Escape'&&el('resetModal').classList.contains('active')){closeModal('resetModal');}});(function init(){const savedTheme=localStorage.getItem('theme')||'light';document.documentElement.setAttribute('data-theme',savedTheme);setMaxDates();el('name').focus();if('serviceWorker' in navigator){navigator.serviceWorker.register('serviceworker.js').then(()=>console.log('Service Worker registered successfully')).catch(err=>console.warn('Service Worker registration failed:',err.message));}else{console.warn('Service Worker not supported in this browser');}})();</script>
+  <script>
+    let state = {
+      name: '',
+      dob: null,
+      age: null,
+      last: null,
+      cycle: 28,
+      periodLen: 5,
+      months: [],
+      visibleIndex: 0,
+      pcodChance: null,
+      pcodSymptoms: []
+    };
+
+    const el = id => document.getElementById(id);
+
+    function showStep(n) {
+      document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
+      if (typeof n === 'string') {
+        el('step-' + n).classList.add('active');
+      } else {
+        el('step-' + n).classList.add('active');
+      }
+      const firstInput = typeof n === 'string' ? el('step-' + n).querySelector('input, button') : el('step-' + n).querySelector('input, button');
+      if (firstInput) firstInput.focus();
+    }
+
+    function showModal(msg) {
+      el('modalText').innerHTML = msg.replace(/\n\n/g, '<br><br>').replace(/https:\/\/github\.com\/alwin-m\/ROS-Cycle-Project/g, '<a href="https://github.com/alwin-m/ROS-Cycle-Project" class="github-link" target="_blank" rel="noopener" aria-label="Beitragen zu ROS Zyklus auf GitHub">GitHub</a>');
+      el('modal').classList.add('active');
+      el('modal').querySelector('.btn-ghost').focus();
+    }
+
+    function closeModal(id = 'modal') {
+      el(id).classList.remove('active');
+      if (id === 'modal' && document.querySelector('#step-pcod.active')) {
+        showStep(2);
+      }
+    }
+
+    function showResetModal() {
+      el('resetModal').classList.add('active');
+      el('resetModal').querySelector('button').focus();
+    }
+
+    function resetAll() {
+      state = {
+        name: '',
+        dob: null,
+        age: null,
+        last: null,
+        cycle: 28,
+        periodLen: 5,
+        months: [],
+        visibleIndex: 0,
+        pcodChance: null,
+        pcodSymptoms: []
+      };
+      el('name').value = '';
+      el('dob').value = '';
+      el('last').value = '';
+      el('cycle').value = '28';
+      el('periodLen').value = '5';
+      el('calendarGrid').innerHTML = '';
+      el('monthTitle').innerText = 'Monat';
+      el('pcod-form').reset();
+      closeModal('resetModal');
+      showStep(1);
+    }
+
+    function skipInfo() {
+      state.name = '';
+      state.dob = null;
+      state.age = null;
+      showStep(2);
+    }
+
+    function nextToStep2() {
+      const name = el('name').value.trim();
+      const dob = el('dob').value;
+      if (name === '') return showModal('Bitte gib deinen Namen ein — ein kurzer Spitzname ist auch okay.');
+      state.name = name;
+      if (dob) {
+        const parsed = new Date(dob);
+        if (isNaN(parsed)) return showModal('Ungültiges Geburtsdatum. Bitte verwende das Format JJJJ-MM-TT.');
+        const age = calculateAge(parsed);
+        if (age < 9 || age > 55) {
+          return showModal('Das Alter scheint ' + age + ' zu sein, was außerhalb des typischen Bereichs (9–55) liegt. Falls korrekt, fahre fort; sonst überprüfe deine Eingabe.');
+        }
+        state.dob = parsed;
+        state.age = age;
+      }
+      showStep(2);
+      setTimeout(() => el('last').focus(), 200);
+    }
+
+    function nextToPCOD() {
+      const name = el('name').value.trim();
+      const dob = el('dob').value;
+      if (name === '') return showModal('Bitte gib deinen Namen ein — ein kurzer Spitzname ist auch okay.');
+      state.name = name;
+      if (dob) {
+        const parsed = new Date(dob);
+        if (isNaN(parsed)) return showModal('Ungültiges Geburtsdatum. Bitte verwende das Format JJJJ-MM-TT.');
+        const age = calculateAge(parsed);
+        if (age < 9 || age > 55) {
+          return showModal('Das Alter scheint ' + age + ' zu sein, was außerhalb des typischen Bereichs (9–55) liegt. Falls korrekt, fahre fort; sonst überprüfe deine Eingabe.');
+        }
+        state.dob = parsed;
+        state.age = age;
+      }
+      showStep('pcod');
+      setTimeout(() => el('symptom1').focus(), 200);
+    }
+
+    function checkPCOD() {
+      const symptoms = document.querySelectorAll('#pcod-form input[type="checkbox"]:checked');
+      state.pcodSymptoms = Array.from(symptoms).map(s => s.nextElementSibling.textContent);
+      const count = symptoms.length;
+      let chance = 'low';
+      let message = '';
+      if (count <= 2) {
+        chance = 'low';
+        message = `Basierend auf deinen Antworten besteht eine geringe Wahrscheinlichkeit, dass du PCO-Syndrom hast.`;
+      } else if (count <= 5) {
+        chance = 'medium';
+        message = `Basierend auf deinen Antworten besteht eine mittlere Wahrscheinlichkeit, dass du PCO-Syndrom hast. Erwäge, einen Arzt aufzusuchen.`;
+      } else {
+        chance = 'high';
+        message = `Basierend auf deinen Antworten besteht eine hohe Wahrscheinlichkeit, dass du PCO-Syndrom hast. Du solltest einen Arzt für eine genaue Diagnose konsultieren.\n\n⚠️ Warnung: PCO-Syndrom kann unregelmäßige Zyklen verursachen, was die Genauigkeit der Periodenvorhersagen in dieser App beeinträchtigen kann. Vorhersagen sind Schätzungen basierend auf durchschnittlichen Zyklusdaten und können aufgrund von Faktoren wie Ernährung, Stress, hormonellen Veränderungen oder anderen Einflüssen variieren. Dies ist ein Open-Source-Prototyp, und wir arbeiten daran, die Genauigkeit zu verbessern. Beitrage zu unserem https://github.com/alwin-m/ROS-Cycle-Project, um Funktionen wie KI-gestützte Vorhersagen zu verbessern!`;
+      }
+      if (state.pcodSymptoms.length > 0) {
+        message += `<br><br><strong>Ausgewählte Symptome:</strong><ul style="margin:10px 0;padding-left:20px;">${state.pcodSymptoms.map(s => `<li>${s}</li>`).join('')}</ul>`;
+      } else {
+        message += `<br><br>Keine Symptome ausgewählt.`;
+      }
+      message += `<br>Dies ist keine medizinische Diagnose — bitte konsultiere einen Gesundheitsdienstleister.`;
+      state.pcodChance = chance;
+      showModal(message);
+    }
+
+    function calculateAge(dob) {
+      const diff = Date.now() - dob.getTime();
+      return Math.floor(diff / (1000 * 60 * 60 * 24 * 365.25));
+    }
+
+    function createCalendar() {
+      const lastVal = el('last').value;
+      const cycleVal = parseInt(el('cycle').value, 10);
+      const periodLenVal = parseInt(el('periodLen').value, 10);
+      if (!lastVal) return showModal('Bitte wähle das Datum deiner letzten Periode.');
+      if (isNaN(cycleVal) || cycleVal < 15 || cycleVal > 45) {
+        return showModal('Die Zykluslänge sollte zwischen 15 und 45 Tagen liegen. Wenn sie außerhalb dieses Bereichs liegt, konsultiere einen Gesundheitsdienstleister.');
+      }
+      if (isNaN(periodLenVal) || periodLenVal < 3 || periodLenVal > 10) {
+        return showModal('Die Periodenlänge sollte zwischen 3 und 10 Tagen liegen.');
+      }
+      const last = new Date(lastVal);
+      if (isNaN(last)) return showModal('Ungültiges Datum für den Periodenbeginn. Bitte verwende das Format JJJJ-MM-TT.');
+      if (last > new Date()) return showModal('Das Datum der letzten Periode kann nicht in der Zukunft liegen.');
+      state.last = new Date(last.getFullYear(), last.getMonth(), last.getDate());
+      state.cycle = cycleVal;
+      state.periodLen = periodLenVal;
+      state.months = [];
+      state.visibleIndex = 0;
+      generateMonth(state.visibleIndex);
+      renderMonth(state.visibleIndex);
+      showStep(3);
+    }
+
+    function generateMonth(index) {
+      if (state.months[index]) return;
+      const start = new Date(state.last.getFullYear(), state.last.getMonth(), 1);
+      const oneDay = 24 * 60 * 60 * 1000;
+      const mm = new Date(start.getFullYear(), start.getMonth() + index, 1);
+      const days = new Date(mm.getFullYear(), mm.getMonth() + 1, 0).getDate();
+      const monthObj = { month: mm.getMonth(), year: mm.getFullYear(), days: [] };
+      for (let d = 1; d <= days; d++) {
+        const date = new Date(mm.getFullYear(), mm.getMonth(), d);
+        const diffDays = Math.round((date - state.last) / oneDay);
+        let type = 'normal';
+        if (diffDays >= 0) {
+          const mod = Math.abs(diffDays % state.cycle);
+          if (mod < state.periodLen) type = 'period';
+          const ovulationIndex = state.cycle - 14;
+          const fertileStart = ovulationIndex - 5;
+          if (mod >= fertileStart && mod <= ovulationIndex) type = (type === 'period') ? 'period' : 'fertile';
+        }
+        monthObj.days.push({ date, type });
+      }
+      state.months[index] = monthObj;
+    }
+
+    function renderMonth(index) {
+      if (index < 0 || index >= 12) return showModal('Keine Vorhersage für diesen Monat verfügbar. Wir prognostizieren nur 12 Monate.');
+      generateMonth(index);
+      const monthObj = state.months[index];
+      el('monthTitle').innerText = `${getMonthName(monthObj.month)} ${monthObj.year}`;
+      el('pred-count').innerText = 12;
+      el('visible-month').innerText = `${index + 1}/12`;
+      el('greeting').innerText = `Hallo ${state.name || 'du'} — dein Kalender:`;
+      el('age-note').innerText = state.age ? `Alter: ${state.age}${state.pcodChance ? `, PCO-Wahrscheinlichkeit: ${state.pcodChance.charAt(0).toUpperCase() + state.pcodChance.slice(1)}` : ''}` : state.pcodChance ? `PCO-Wahrscheinlichkeit: ${state.pcodChance.charAt(0).toUpperCase() + state.pcodChance.slice(1)}` : '';
+      const grid = el('calendarGrid');
+      grid.innerHTML = '';
+      const firstDay = new Date(monthObj.year, monthObj.month, 1);
+      const startOffset = firstDay.getDay();
+      const daysInMonth = monthObj.days.length;
+      const totalCells = Math.ceil((startOffset + daysInMonth) / 7) * 7;
+      for (let i = 0; i < totalCells; i++) {
+        const cell = document.createElement('div');
+        cell.className = 'cell';
+        if (i < startOffset || i >= startOffset + daysInMonth) {
+          cell.className += ' other';
+          cell.innerHTML = `<div class="daynum">-</div>`;
+        } else {
+          const dayIndex = i - startOffset;
+          const day = monthObj.days[dayIndex];
+          const dateStr = day.date.toISOString().split('T')[0];
+          cell.innerHTML = `<div class="daynum">${day.date.getDate()}</div>`;
+          if (day.type !== 'normal') {
+            cell.innerHTML += `<div class="badge ${day.type}">${day.type === 'period' ? 'Periode' : 'Fruchtbar'}</div>`;
+            const tip = document.createElement('div');
+            tip.className = 'tooltip';
+            tip.innerText = `${day.type === 'period' ? 'Periodentag' : 'Fruchtbarer Tag'}: ${dateStr}`;
+            cell.appendChild(tip);
+          }
+        }
+        cell.tabIndex = 0;
+        grid.appendChild(cell);
+      }
+    }
+
+    function getMonthName(month) {
+      const names = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
+      return names[month];
+    }
+
+    function toggleTheme() {
+      const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+      document.documentElement.setAttribute('data-theme', isDark ? 'light' : 'dark');
+      localStorage.setItem('theme', isDark ? 'light' : 'dark');
+    }
+
+    el('prevBtn').addEventListener('click', () => {
+      state.visibleIndex = Math.max(0, state.visibleIndex - 1);
+      renderMonth(state.visibleIndex);
+    });
+
+    el('nextBtn').addEventListener('click', () => {
+      state.visibleIndex = Math.min(11, state.visibleIndex + 1);
+      renderMonth(state.visibleIndex);
+    });
+
+    function setMaxDates() {
+      const today = new Date().toISOString().split('T')[0];
+      el('dob').max = today;
+      el('last').max = today;
+    }
+
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && el('modal').classList.contains('active')) {
+        closeModal();
+      } else if (e.key === 'Escape' && el('resetModal').classList.contains('active')) {
+        closeModal('resetModal');
+      }
+    });
+
+    (function init() {
+      const savedTheme = localStorage.getItem('theme') || 'light';
+      document.documentElement.setAttribute('data-theme', savedTheme);
+      setMaxDates();
+      el('name').focus();
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('serviceworker.js')
+          .then(() => console.log('Service Worker erfolgreich registriert'))
+          .catch(err => console.warn('Service Worker Registrierung fehlgeschlagen:', err.message));
+      } else {
+        console.warn('Service Worker wird in diesem Browser nicht unterstützt');
+      }
+    })();
+  </script>
 </body>
 </html>
