Optimize Kochmodus: Remove banner, integrate toggle into 3-dots menu, add active border and dual WakeLock/NoSleep fallback

app/static/cookbook.css

@@ -2333,71 +2333,105 @@ body.modal-open {
 }
 
 /* ==========================================================================
-   Kochmodus (Keep Screen Awake & Interactive Cooking Experience)
+   Kochmodus (Rahmen um Rezept & Keep Screen Awake)
    ========================================================================== */
-.recipe-cookmode-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: #FFFFFF;
-  border: 1.5px solid rgba(30, 77, 59, 0.22);
-  border-radius: 10px;
-  padding: 11px 16px;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 8px rgba(30, 77, 59, 0.06);
-  transition: all 0.25s ease;
+body.cook-mode-on .recipe-page {
+  border: 3.5px solid var(--tannengruen);
+  box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.45), 0 8px 32px rgba(30, 77, 59, 0.35);
+  position: relative;
+  transition: border 0.25s ease, box-shadow 0.25s ease;
+}
+
+body.cook-mode-on .recipe-page::before {
+  content: "👨‍🍳 Kochmodus aktiv 💡";
+  position: absolute;
+  top: 14px;
+  right: 18px;
+  background: var(--tannengruen);
+  color: var(--creme);
+  font-family: var(--font-hand);
+  font-size: 1.15rem;
+  font-weight: 700;
+  padding: 3px 14px;
+  border-radius: 20px;
+  border: 2px solid var(--creme);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
+  z-index: 15;
+  pointer-events: none;
+  animation: cookmode-badge-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes cookmode-badge-pop {
+  0% { transform: scale(0.85); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+@media screen and (max-width: 600px) {
+  body.cook-mode-on .recipe-page::before {
+    top: 10px;
+    right: 10px;
+    font-size: 0.95rem;
+    padding: 2px 10px;
+  }
+}
+
+/* Mobile Kebab Kochmodus Row */
+.cb-mobile-cookmode-item {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  padding: 10px 16px !important;
+  background: rgba(30, 77, 59, 0.05);
+  border-bottom: 1.5px solid rgba(0, 0, 0, 0.08);
+  cursor: pointer;
   user-select: none;
+  transition: background 0.15s ease;
 }
 
-body.cook-mode-on .recipe-cookmode-banner {
+.cb-mobile-cookmode-item:hover,
+.cb-mobile-cookmode-item:active {
+  background: rgba(30, 77, 59, 0.12);
+}
+
+body.cook-mode-on .cb-mobile-cookmode-item {
   background: #FFFDF0;
-  border-color: #d4c165;
-  box-shadow: 0 4px 16px rgba(212, 193, 101, 0.28);
+  border-bottom-color: #d4c165;
 }
 
-.recipe-cookmode-left {
+.cookmode-item-left {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
 }
 
-.cookmode-icon {
-  font-size: 1.7rem;
+.cookmode-item-left .cookmode-icon {
+  font-size: 1.5rem;
   line-height: 1;
 }
 
-.cookmode-text-group {
+.cookmode-text-box {
   display: flex;
   flex-direction: column;
-  gap: 2px;
 }
 
-.cookmode-main-text {
-  font-size: 1.05rem;
+.cookmode-text-box .cookmode-title {
+  font-family: var(--font-hand);
+  font-size: 1.2rem;
   font-weight: 700;
   color: var(--tannengruen);
-  display: flex;
-  align-items: center;
-  gap: 6px;
+  line-height: 1.1;
 }
 
-.cookmode-sub-text {
-  font-size: 0.82rem;
+.cookmode-text-box .cookmode-status-text {
+  font-size: 0.76rem;
   color: #666;
-  transition: color 0.2s ease;
 }
 
-body.cook-mode-on .cookmode-sub-text {
-  color: #7a5a00;
+body.cook-mode-on .cookmode-text-box .cookmode-status-text {
+  color: #8c6800;
   font-weight: 600;
 }
 
-.recipe-cookmode-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
 /* Custom Schieberegler (Slider Switch) */
 .cb-switch {
   position: relative;
@@ -2680,6 +2714,13 @@ body.cook-mode-on .cookmode-badge {
 
 /* Druck-Schutz */
 @media print {
+  body.cook-mode-on .recipe-page {
+    border: none !important;
+    box-shadow: none !important;
+  }
+  body.cook-mode-on .recipe-page::before {
+    display: none !important;
+  }
   .recipe-cookmode-banner,
   .cb-nav-cookmode-toggle,
   .step-done-check,