diff --git a/portal/index.html b/portal/index.html
index ccf4f6d..e13afbf 100644
--- a/portal/index.html
+++ b/portal/index.html
@@ -15,30 +15,56 @@
     *, *::before, *::after { box-sizing: border-box; }
 
     :root {
+      /* Die Seite kann beide Ansichten — native Bedienelemente folgen mit. */
+      color-scheme: light dark;
+
       --green: #1a3d1a;
       --green-mid: #2d5a2d;
       --green-accent: #3a7a3a;
+      --on-green: #e8e8d8;
       --text: #1a1a1a;
       --muted: #666;
       --bg: #e8e8e2;
       --card-bg: #f4f4ee;
+      --card-hover: #ececdf;
+      --card-active: #eaeae2;
       --border: #bbbba8;
       --shadow: 0 1px 3px rgba(0,0,0,0.15);
       --radius: 2px;
     }
 
+    /* Nachtansicht, passend zu den drei Apps. Ohne sie blendet das Portal beim
+       Zurückgehen aus einer dunklen App — genau in der Situation, für die die
+       Apps eine Nachtansicht bekommen haben. Alle Paare >= 6,4:1. */
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --green: #101a0d;
+        --green-mid: #7fb36f;
+        --green-accent: #4f8f4f;
+        --on-green: #dfe6da;
+        --text: #e9e7dd;
+        --muted: #a6a698;
+        --bg: #14180f;
+        --card-bg: #1e241a;
+        --card-hover: #262d21;
+        --card-active: #2a3124;
+        --border: #333b28;
+        --shadow: 0 1px 3px rgba(0,0,0,0.5);
+      }
+    }
+
     html, body {
       margin: 0;
       padding: 0;
       background: var(--bg);
       color: var(--text);
       font-family: Georgia, 'Times New Roman', serif;
-      min-height: 100vh;
+      min-height: 100dvh;
     }
 
     header {
       background: var(--green);
-      color: #e8e8d8;
+      color: var(--on-green);
       padding: 1.5rem 1.5rem 1.2rem;
       border-bottom: 3px solid var(--green-accent);
     }
@@ -93,12 +119,12 @@
     }
 
     .app-card:active {
-      background: #eaeae2;
+      background: var(--card-active);
     }
 
     @media (hover: hover) {
       .app-card:hover {
-        background: #ececdf;
+        background: var(--card-hover);
         border-left-color: var(--green-accent);
       }
     }
@@ -154,7 +180,7 @@
       top: 0;
       z-index: 100;
       background: var(--green);
-      color: #fff;
+      color: var(--on-green);
       padding: 0.6rem 1rem;
       font-size: 0.88rem;
       align-items: center;
@@ -164,7 +190,7 @@
     #install-banner.visible { display: flex; }
     #install-banner span { flex: 1; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
     #install-btn {
-      background: #fff;
+      background: var(--on-green);
       color: var(--green);
       border: none;
       border-radius: 4px;
@@ -177,7 +203,7 @@
     #dismiss-btn {
       background: transparent;
       border: none;
-      color: rgba(255,255,255,0.8);
+      color: var(--on-green);
       font-size: 1rem;
       cursor: pointer;
       padding: 0.2rem 0.3rem;