diff --git a/app/static/app/css/custom.css b/app/static/app/css/custom.css
index 84a77c4..b438b90 100644
--- a/app/static/app/css/custom.css
+++ b/app/static/app/css/custom.css
@@ -38,45 +38,29 @@
 
 @keyframes openSettingsbg {
     0% {
-        height: 7vh;
+        height: 8vh;
     }
     100% {
         height: 100vh;
     }
 }
 
+/* rem statt vh: die Monatskarte soll auf jedem Gerät gleich groß aussehen ("fix"), nur die
+   Aktivitäten-Tabelle (flex:1 1 auto, siehe unten) gleicht unterschiedliche Displayhöhen aus. */
 @keyframes openMonthArea {
     0% {
-        height: 15vh;
+        height: 6.5rem;
         margin-top: 1.5rem;
     }
     100% {
-        height: 20vh;
+        height: 9.5rem;
         margin-top: 1.5rem;
     }
 }
 
-@keyframes shrinkActivitys {
-    0% {
-        height: 40vh;
-    }
-    100% {
-        height: 35vh;
-    }
-}
-
-@keyframes growActivitys {
-    0% {
-        height: 35vh;
-    }
-    100% {
-        height: 40vh;
-    }
-}
-
 @keyframes openSettingscolor {
     0% {
-        height: 6vh;
+        height: 7vh;
     }
     100% {
         height: 95vh;
@@ -88,7 +72,7 @@
         height: 95vh;
     }
     100% {
-        height: 6vh;
+        height: 7vh;
     }
 }
 
@@ -97,27 +81,27 @@
         height: 100vh;
     }
     100% {
-        height: 7vh;
+        height: 8vh;
     }
 }
 
 @keyframes closeMonthArea {
     0% {
-        height: 20vh;
+        height: 9.5rem;
         margin-top: 1.5rem;
     }
     100% {
-        height: 15vh;
+        height: 6.5rem;
         margin-top: 1.5rem;
     }
 }
 
 .HeaderDefaultHeightbg {
-    height: 7vh;
+    height: 8vh;
 }
 
 .HeaderDefaultHeightcolor {
-    height: 6vh;
+    height: 7vh;
 }
 
 .slide-out {
@@ -145,14 +129,6 @@
     animation: closeMonthArea 1s forwards;
 }
 
-.shrinkActivitys {
-    animation: shrinkActivitys 1s forwards;
-}
-
-.growActivitys {
-    animation: growActivitys 1s forwards;
-}
-
 .closeSettingsbg {
     animation: closeSettingsbg 1s forwards;
 }
@@ -170,7 +146,7 @@
 }
 
 #dashbord_month_area {
-    height: 15vh;
+    height: 6.5rem;
 }
 
 /* Neu hinzugefügte Icons (Filter-Toggle, Maximieren) in Grau statt Schwarz/Weiß.
@@ -200,13 +176,9 @@
     pointer-events: none;
 }
 
-#ActivitysTable {
-    transition: height 0.4s ease-in-out;
-}
-
-#ActivitysTable.ActivitysTableMaximized {
-    height: 65vh !important;
-}
+/* Kein fester height-Override beim Maximieren mehr nötig: ActivitysTable ist flex:1 1 auto
+   (siehe #dashboard) und wächst automatisch in den Platz, den die kollabierende Timer-Karte
+   freigibt - inklusive sauberer Animation, weil beides gleichzeitig neu layoutet wird. */
 
 /* Filter/Sortierung ein- und ausblenden.
    overflow bleibt im geöffneten Zustand "visible", damit das Dropdown-Menü (sortFieldMenu)
@@ -248,7 +220,7 @@
 }
 
 .maincontainer {
-    height: 93vh;
+    height: 92vh;
     transition: height 1s ease, transform 1s ease;
     margin: 0;
     /* Grundsätzlicher Fix für kleinere Displays (z.B. iPhone 12 mini vs. 15 Pro): die feste
@@ -271,6 +243,16 @@
     width: 100%;
 }
 
+/* Jahr/Monat/Timer bleiben "fix" (rem-/inhaltsbasiert, gerätunabhängig gleich groß).
+   Die Aktivitäten-Tabelle (flex:1 1 auto, siehe ihre eigene Regel) gleicht als einziges
+   Element unterschiedliche Displayhöhen aus, statt dass wir jede Karte einzeln pro
+   Gerät neu austarieren müssen. */
+#dashboard {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
 /* "Wow-Moment" beim Öffnen der Update-Infos: sanftes Herein-Poppen statt einfach da zu sein. */
 @keyframes updateWow {
     0% { opacity: 0; transform: scale(0.85) translateY(20px); }
diff --git a/app/static/app/js/home01.js b/app/static/app/js/home01.js
index f4cf753..f2e4fc4 100644
--- a/app/static/app/js/home01.js
+++ b/app/static/app/js/home01.js
@@ -38,7 +38,8 @@ var sortField = 'date';
 var sortDirection = 'asc';
 
 // Ob die Filter/Sortier-Optionen gerade sichtbar sind (wird ebenfalls im Cache gespeichert).
-var isFilterVisible = true;
+// Standardmäßig ausgeblendet, bis der Nutzer sie einmal selbst einblendet.
+var isFilterVisible = false;
 
 // Ob die Aktivitäten-Tabelle gerade maximiert ist (Timer-Karte ist dann ausgeblendet).
 var isTableMaximized = false;
@@ -700,9 +701,10 @@ document.getElementById('dashbord_month_area').addEventListener('click', () =>{
         document.getElementById('dashbord_month_area').classList.replace('closeMonthArea', 'openMonthArea')
         document.getElementById('dashbord_month_area').classList.add(['openMonthArea'])
         document.getElementById('dashbord_month_area').classList.add(['ActiveMonth'])
-        document.getElementById('ActivitysTable').classList.add(['shrinkActivitys'])
-        document.getElementById('ActivitysTable').classList.replace('growActivitys', 'shrinkActivitys')
-        document.getElementById('dashbord_month_area').classList.remove('mt-4')
+        // ActivitysTable ist jetzt flex:1 1 auto (siehe custom.css) und macht der wachsenden
+        // Monatskarte automatisch Platz - kein manuelles shrinkActivitys/growActivitys mehr nötig,
+        // das würde der Flex-Berechnung sonst mit einer festen vh-Höhe in die Quere kommen.
+        document.getElementById('dashbord_month_area').classList.remove('mt-3')
         // document.getElementById('dashbord_year_area').classList.add('fade-out')
         // Für jedes ausgewählte Element die neue Klasse hinzufügen
         setTimeout(function() {
@@ -718,7 +720,7 @@ document.getElementById('dashbord_month_area').addEventListener('click', () =>{
     } else {
         document.getElementById('dashbord_month_area').classList.remove('ActiveMonth')
         document.getElementById('dashbord_month_area').classList.replace('openMonthArea', 'closeMonthArea')
-        document.getElementById('ActivitysTable').classList.replace('shrinkActivitys', 'growActivitys')
+        document.getElementById('dashbord_month_area').classList.add('mt-3')
         monthEntrys.forEach(element => {
             element.classList.replace('fade-in', 'fade-out');
         });
diff --git a/app/templates/app/base.html b/app/templates/app/base.html
index 47dea47..759a597 100644
--- a/app/templates/app/base.html
+++ b/app/templates/app/base.html
@@ -25,10 +25,10 @@
                  dadurch wurde der Settings-Button vom overflow:hidden des Headers abgeschnitten.
                  HeaderText ist absolut mittig zur vollen Breite positioniert, damit "PIOMINT" mittig
                  bleibt, egal wie breit die Icon-Gruppen links/rechts gerade sind. -->
-            <div class="d-flex align-items-center headerline" style="position: relative; width: 100%; height: 6vh; flex: 0 0 auto; padding: 0 0.75rem;">
+            <div class="d-flex align-items-center headerline" style="position: relative; width: 100%; height: 7vh; flex: 0 0 auto; padding: 0 0.75rem;">
                 <span class="d-none" id="refresh_icon" style="width: 28px; flex: 0 0 auto;"><img onclick="window.location.reload();" src="{% static 'app/images/refresh.png' %}" alt="Settings" class="img-fluid" id="image" style="width: 100%; opacity: 0.75;"></span>
 
-                <h3 id="HeaderText" class="pt-2" style="display: none; margin: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);"><b>PIO</b><b style="color: rgb(120,170,86);">MINT</b></h3>
+                <h3 id="HeaderText" style="display: none; margin: 0; padding: 0; line-height: 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);"><b>PIO</b><b style="color: rgb(120,170,86);">MINT</b></h3>
 
                 <div class="d-flex align-items-center" style="gap: 1rem; margin-left: auto;">
                     <span class="d-none" id="share_icon" style="width: 28px; flex: 0 0 auto;" title="Bericht für WhatsApp kopieren">
diff --git a/app/templates/app/home.html b/app/templates/app/home.html
index addb43d..be2b614 100644
--- a/app/templates/app/home.html
+++ b/app/templates/app/home.html
@@ -10,7 +10,7 @@
     document.getElementById('maincontainer').classList.replace('align-items-center', 'align-items-top')
 </script>
 
-<div class="container" id="welcome_content">
+<div class="container" id="welcome_content" style="padding-bottom: 3rem;">
     <br>
     <h1>Willkommen! 👋</h1>
     <p>
@@ -34,57 +34,59 @@
     <button class="btn btn-primary" id="allOk">Alles klar</button>
 </div>
 
-<div class="container mt-5" id="update_content">
-    
+<div class="container mt-5" id="update_content" style="padding-bottom: 3rem;">
+
     {% include 'app/updateinfo.html' %}
 
     <button class="btn btn-primary" id="allUpdateOk">Alles klar</button>
 </div>
 
 <div class="d-none" id="dashboard">
-    <div class="row justify-content-around mt-3" style="width: 100vw; color: black;">
-        <div class="col-11" id="dashbord_year_area" style="height: 5vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
-            <div class="row justify-content-between">
-                <p class="col-6" style="font-size: 1rem; margin-top: -0.75rem; white-space: nowrap;"><b>Jahr:</b> <span id="yearHours"></span>h/600h<span id="rule55Badge" class="badge badge-warning d-none" title="55h-Regel aktiv: Monate mit LDC/Sonstiges werden auf 55h gedeckelt" style="font-size: 0.55rem; vertical-align: middle; margin-left: 0.25rem;">55h</span></p>
-                <p class="offset-1 col-5" style="font-size: 1rem; margin-top: -0.75rem;"><b>Offen:</b> <span id="yearRest"></span>h</p>
+    <div class="row justify-content-around mt-3" style="width: 100vw; color: black; flex-shrink: 0;">
+        <div class="col-11" id="dashbord_year_area" style="padding: 0.5rem 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray; display: flex; flex-direction: column; justify-content: center; gap: 0.35rem;">
+            <!-- flex-shrink:0 auf beiden Kindern: sonst quetscht Flexbox in der knappen Höhe
+                 den 5px-Balken dünner als den (nicht-flex) Balken der Monatskarte. -->
+            <div class="row justify-content-between" style="margin: 0; flex-shrink: 0;">
+                <p class="col-6" style="font-size: 1rem; margin: 0; white-space: nowrap;"><b>Jahr:</b> <span id="yearHours"></span>h/600h<span id="rule55Badge" class="badge badge-warning d-none" title="55h-Regel aktiv: Monate mit LDC/Sonstiges werden auf 55h gedeckelt" style="font-size: 0.55rem; vertical-align: middle; margin-left: 0.25rem;">55h</span></p>
+                <p class="offset-1 col-5" style="font-size: 1rem; margin: 0;"><b>Offen:</b> <span id="yearRest"></span>h</p>
             </div>
-            <div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin-top: -1rem;">
+            <div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin: 0; flex-shrink: 0;">
                 <div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); width: 0.5%; height: 5px;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="50" id="prBarYear"></div>
             </div>
         </div>
-        <div class="col-11 mt-4" id="dashbord_month_area" style="padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
+        <div class="col-11 mt-3" id="dashbord_month_area" style="padding: 0.75rem 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
 
-            <div class="row justify-content-between">
-                <p class="col-7" style="font-size: 1.25rem;"><b id="MonthNameOfActual">Monat:</b> <span id="monthHours"></span>h</p>
+            <div class="row justify-content-between" style="margin: 0 0 0.4rem 0;">
+                <p class="col-7" style="font-size: 1.25rem; margin: 0;"><b id="MonthNameOfActual">Monat:</b> <span id="monthHours"></span>h</p>
                 <input type="number" class="d-none" id="MonthSumHours">
-                <p class="col-5" style="font-size: 1.25rem;"><b>Offen:</b> <span id="monthRest"></span>h</p>
+                <p class="col-5" style="font-size: 1.25rem; margin: 0;"><b>Offen:</b> <span id="monthRest"></span>h</p>
             </div>
 
-            <div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin-top: -0.75rem">
+            <div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin: 0;">
                 <div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); height: 5px; width: 1%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="50" id="prBarMonth"></div>
             </div>
 
             <!-- justify-content-around verteilt die Badges wie bisher auf die verfügbare Breite,
                  solange sie passen; erst wenn der individuell vergebene Schnellwahl-Titel (siehe
                  Einstellungen) zu lang wird, greift overflow-x: auto statt eines Umbruchs. -->
-            <div class="d-flex justify-content-around mt-3" style="overflow-x: auto; gap: 0.5rem; padding-bottom: 2px;">
+            <div class="d-flex justify-content-around" style="overflow-x: auto; gap: 0.5rem; padding-bottom: 2px; margin-top: 0.5rem;">
                 <button class="badge badge-primary" style="height: 25px; border: none; white-space: nowrap; flex: 0 0 auto;">Dienst: <span id="monthHourService"></span>h</button>
                 <button class="badge badge-primary" style="height: 25px; border: none; white-space: nowrap; flex: 0 0 auto;"><span id="monthHourLDCLabel">LDC</span>: <span id="monthHourLDC"></span>h</button>
                 <button class="badge badge-primary" style="height: 25px; border: none; white-space: nowrap; flex: 0 0 auto;">Übrig: <span id="monthHourOther"></span>h</button>
             </div>
 
-            <div class="row justify-content-around align-middle monthEntrys mt-3" style="max-height: 2.5rem; width: 99%; margin-left: 1%;">
+            <div class="row justify-content-around align-middle monthEntrys" style="max-height: 2.5rem; width: 99%; margin-left: 1%; margin-top: 0.5rem;">
                 <span class="col-2 btn btn-secondary" id="btn-month-before" onclick="event.stopPropagation();"><</span>
                 <p class="col-6" style="text-align:center; width: 100%; font-size: 1.75rem; margin: 0;"><b id="actualMonthName"></b></p>
                 <span class="col-2 btn btn-secondary" id="btn-month-next" onclick="event.stopPropagation();">></span>
             </div>
 
         </div>
-    </div>    
-    <div class="row justify-content-around" id="timerCard" style="width: 100vw; color: black; padding-top: 2rem;">
-        <div class="col-11" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
-            <p style="font-size: 1.2rem;"><b>Timer</b></p>
-            <div class="row justify-content-between" style="margin-top: -1rem;">
+    </div>
+    <div class="row justify-content-around" id="timerCard" style="width: 100vw; color: black; padding-top: 1.5rem; flex-shrink: 0;">
+        <div class="col-11" style="padding: 0.75rem 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray; display: flex; flex-direction: column; justify-content: center; gap: 0.35rem;">
+            <p style="font-size: 1.2rem; margin: 0; flex-shrink: 0;"><b>Timer</b></p>
+            <div class="row justify-content-between" style="margin: 0; flex-shrink: 0;">
                 <p class="col-5"><b id="timerDisplay" style="font-size: 2.5rem;">00:00</b><i id="secondsDisplay" style="font-size: 1rem;">:00</i></p>
                 <div class="col-7 row justify-content-center">
                     <img id="startTimer" src="{% static 'app/images/play.png' %}" alt="play" class="img-fluid col-6" style="height: 55px;">
@@ -94,18 +96,17 @@
             </div>
         </div>
     </div>
-    <div class="row justify-content-around" style="width: 95vw; color: black; padding-top: 2rem;"></div>
-        <div class="col-12" id="ActivitysTable"  style="height: 40vh; padding: 0rem 1rem 1rem 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray; overflow-y: auto;">
-            <div style="position: sticky; top: 0; background-color: white; padding-top: 1rem; z-index: 100; width: 100%;">
+        <div class="col-12 mt-3" id="ActivitysTable"  style="flex: 1 1 auto; min-height: 220px; padding: 0rem 1rem 1rem 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray; overflow-y: auto;">
+            <div style="position: sticky; top: 0; background-color: white; padding-top: 1rem; padding-bottom: 0.5rem; z-index: 100; width: 100%;">
                 <div class="d-flex justify-content-between align-items-center" style="width: 100%;">
                     <p style="font-size: 1.2rem; margin: 0;" ><b>Aktivitäten</b></p>
-                    <div class="d-flex align-items-center" style="gap: 0.5rem;">
-                        <button type="button" id="openNewEntryForm" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#newEntryModal" style="width: 45px; height: 45px; padding: 0;"><img id="openNewEntryFormIcon" src="{% static 'app/images/addcircle.png' %}" alt="add" class="img-fluid"></button>
-                        <button type="button" id="toggleSortOptions" class="btn btn-light" title="Filter/Sortierung ein-/ausblenden" style="width: 45px; height: 45px; padding: 0;"><img id="toggleSortOptionsIcon" src="{% static 'app/images/more.png' %}" alt="filter" class="img-fluid"></button>
-                        <button type="button" id="openViewOfEntry" class="btn btn-light" title="Tabelle maximieren" style="width: 45px; height: 45px; padding: 0;"><img id="openViewOfEntryIcon" src="{% static 'app/images/open.png' %}" alt="open" class="img-fluid"></button>
+                    <div class="d-flex align-items-center" style="gap: 1rem;">
+                        <button type="button" id="openNewEntryForm" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#newEntryModal" style="width: 28px; height: 28px; padding: 0;"><img id="openNewEntryFormIcon" src="{% static 'app/images/addcircle.png' %}" alt="add" class="img-fluid" style="width: 100%;"></button>
+                        <button type="button" id="toggleSortOptions" class="btn btn-light" title="Filter/Sortierung ein-/ausblenden" style="width: 28px; height: 28px; padding: 0;"><img id="toggleSortOptionsIcon" src="{% static 'app/images/more.png' %}" alt="filter" class="img-fluid" style="width: 100%;"></button>
+                        <button type="button" id="openViewOfEntry" class="btn btn-light" title="Tabelle maximieren" style="width: 28px; height: 28px; padding: 0;"><img id="openViewOfEntryIcon" src="{% static 'app/images/open.png' %}" alt="open" class="img-fluid" style="width: 100%;"></button>
                     </div>
                 </div>
-                <div class="d-flex align-items-center" id="sortOptionsRow" style="width: 100%; margin-top: 0.5rem; gap: 0.5rem;">
+                <div class="d-flex align-items-center sortOptionsCollapsed" id="sortOptionsRow" style="width: 100%; margin-top: 0.5rem; gap: 0.5rem;">
                     <!-- Eigener Dropdown statt <select>, damit das Auswahlmenü nicht als winziges natives
                          Popup irgendwo auf dem Bildschirm erscheint, sondern direkt unter dem Button. -->
                     <div style="position: relative; flex: 1;">