coloring

httpdocs/.claude/settings.local.json

@@ -0,0 +1,8 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(xargs grep -l 'color-white\\\\|color: $color-white\\\\|#fff\\\\b')",
+      "Bash(grep *)"
+    ]
+  }
+}

httpdocs/assets/scripts/account.js

@@ -21,16 +21,31 @@ document.addEventListener('DOMContentLoaded', () => {
         return json;
     }
 
-    // ── Farbfeld: Picker ↔ Hex-Input synchron ────────────────────────────────
+    // ── Farbfeld: Picker ↔ Hex-Input synchron + Live-Kontrast ────────────────
     const colorPicker = document.getElementById('account-color-picker');
     const colorHex    = document.getElementById('account-color');
+
+    function applyHeaderContrast(hex) {
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+        const isLight = brightness > 128;
+        const root = document.documentElement;
+        root.style.setProperty('--header-text',       isLight ? '#1a2a3a' : '#ffffff');
+        root.style.setProperty('--header-text-muted', isLight ? 'rgba(26, 42, 58, 0.65)' : 'rgba(255, 255, 255, 0.75)');
+        root.style.setProperty('--header-overlay',    isLight ? 'rgba(0, 0, 0, 0.08)'    : 'rgba(255, 255, 255, 0.18)');
+    }
+
     if (colorPicker && colorHex) {
         colorPicker.addEventListener('input', () => {
             colorHex.value = colorPicker.value;
+            applyHeaderContrast(colorPicker.value);
         });
         colorHex.addEventListener('input', () => {
             if (/^#[0-9a-fA-F]{6}$/.test(colorHex.value)) {
                 colorPicker.value = colorHex.value;
+                applyHeaderContrast(colorHex.value);
             }
         });
     }

httpdocs/assets/styles/atoms/_variables.scss

@@ -22,6 +22,9 @@ $color-bg:             #dce9f5;
   --color-header-to:     #{$color-header-to};
   --color-bg:            #{$color-bg};
   --color-primary-rgb:   74, 144, 217;
+  --header-text:         #{$color-white};
+  --header-text-muted:   rgba(255, 255, 255, 0.75);
+  --header-overlay:      rgba(255, 255, 255, 0.18);
 }
 $color-card:           #f0f0f0;
 $color-card-white:     #ffffff;

httpdocs/assets/styles/components/_account.scss

@@ -22,13 +22,13 @@
 .account-header__title {
   font-size: $font-size-xl;
   font-weight: $font-weight-bold;
-  color: $color-white;
+  color: var(--header-text);
 }
 
 // ─── Tab-Navigation (Pill im Header) ─────────────────────────────────────────
 .account-tabs {
   display: flex;
-  background: rgba($color-white, 0.18);
+  background: var(--header-overlay);
   border-radius: $radius-pill;
   padding: 3px;
   gap: $space-1;
@@ -42,15 +42,15 @@
   padding: $space-2 $space-5;
   font-size: $font-size-sm;
   font-weight: $font-weight-medium;
-  color: rgba($color-white, 0.8);
+  color: var(--header-text-muted);
   text-decoration: none;
   border-radius: $radius-pill;
   transition: background $transition-fast, color $transition-fast;
   white-space: nowrap;
 
   &:hover:not(.account-tab--active) {
-    color: $color-white;
-    background: rgba($color-white, 0.12);
+    color: var(--header-text);
+    background: var(--header-overlay);
   }
 
   &--active {
@@ -114,10 +114,10 @@
 
 .account-form__link {
   font-size: $font-size-sm;
-  color: var(--color-primary);
+  color: $color-text-muted;
   text-decoration: none;
 
-  &:hover { text-decoration: underline; }
+  &:hover { color: $color-text-dark; text-decoration: underline; }
 }
 
 // ─── Farbfeld ─────────────────────────────────────────────────────────────────

httpdocs/assets/styles/components/_crud.scss

@@ -54,7 +54,7 @@
   transition: background $transition-fast;
 
   &:hover {
-    background: rgba($color-primary, 0.03);
+    background: rgba(var(--color-primary-rgb), 0.05);
 
     .crud-row__btn { opacity: 1; }
   }
@@ -101,7 +101,7 @@
 
   svg { width: 14px; height: 14px; pointer-events: none; }
 
-  &--edit:hover  { background: rgba($color-primary, 0.1); color: var(--color-primary); }
+  &--edit:hover  { background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary); }
   &--delete:hover{ background: rgba($color-error, 0.1); color: $color-error; }
 
   @media (hover: none) { opacity: 1; }
@@ -110,7 +110,7 @@
 // ─── Edit-Formular innerhalb der Zeile ─────────────────────────────────────────
 .crud-row__edit {
   padding: $space-4 $space-6;
-  background: rgba($color-primary, 0.03);
+  background: rgba(var(--color-primary-rgb), 0.04);
   border-top: 1px solid rgba($color-border, 0.5);
 }
 
@@ -154,7 +154,7 @@
 
   &--active {
     background: var(--color-primary);
-    color: $color-white;
+    color: var(--header-text);
   }
 }
 
@@ -185,7 +185,7 @@
   color: $color-text-muted;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  background: rgba($color-primary, 0.03);
+  background: rgba(var(--color-primary-rgb), 0.03);
   border-bottom: 1px solid rgba($color-border, 0.5);
 }
 

httpdocs/assets/styles/components/_duration-help.scss

@@ -1,13 +1,15 @@
 @use '../atoms/variables' as *;
 
 // ── Dauer-Hilfe Tooltip ───────────────────────────────────────────────────────
-// Zeigt "?" an, auf Hover klappt der Hilfetext aus
+// Zeigt "?" an, auf Hover klappt der Hilfetext aus (absolut positioniert,
+// damit er die Grid-Spaltenbreite nicht verschiebt).
 
 .duration-help {
   display: inline-flex;
   align-items: center;
   cursor: help;
   flex-shrink: 0;
+  position: relative;
 
   &__icon {
     display: inline-flex;
@@ -22,35 +24,27 @@
     font-size: $font-size-xs;
     font-weight: $font-weight-bold;
     flex-shrink: 0;
-    transition:
-      width $transition-base,
-      opacity $transition-base,
-      border $transition-base,
-      margin $transition-base;
-    overflow: hidden;
+    transition: opacity $transition-fast;
   }
 
   &__hint {
+    position: absolute;
+    left: calc(100% + #{$space-2});
+    top: 50%;
+    transform: translateY(-50%);
     font-size: $font-size-xs;
     color: $color-text-muted;
     white-space: nowrap;
-    max-width: 0;
-    overflow: hidden;
     opacity: 0;
-    transition:
-      max-width 0.28s ease,
-      opacity 0.2s ease;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
   }
 
   &:hover &__icon {
-    width: 0;
     opacity: 0;
-    border-width: 0;
-    margin-right: 0;
   }
 
   &:hover &__hint {
-    max-width: 500px;
     opacity: 1;
   }
-}
+}

httpdocs/assets/styles/components/_entry-list.scss

@@ -77,7 +77,7 @@
   padding: $space-4 $space-8;
 
   &:hover {
-    background: rgba($color-primary, 0.03);
+    background: rgba(var(--color-primary-rgb), 0.05);
 
     .entry-row__btn {
       opacity: 1;
@@ -147,7 +147,7 @@
 
   svg { width: 14px; height: 14px; pointer-events: none; }
 
-m  &--edit:hover  { background: rgba($color-primary, 0.1); color: var(--color-primary); }
+  &--edit:hover  { background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary); }
   &--delete:hover{ background: rgba($color-error, 0.1); color: $color-error; }
 
   // immer sichtbar auf Touch-Geräten
@@ -176,7 +176,7 @@ m  &--edit:hover  { background: rgba($color-primary, 0.1); color: var(--color-pr
 // ─── Bearbeiten-Modus ─────────────────────────────────────────────────────
 .entry-row__edit {
   padding: $space-4 $space-8;
-  background: rgba($color-primary, 0.03);
+  background: rgba(var(--color-primary-rgb), 0.04);
   border-top: 1px solid rgba($color-border, 0.5);
 }
 

httpdocs/assets/styles/components/_month-calendar.scss

@@ -39,7 +39,7 @@
 .month-calendar__title {
   font-size: $font-size-md;
   font-weight: $font-weight-bold;
-  color: $color-white;
+  color: var(--header-text);
   letter-spacing: 0.01em;
 }
 
@@ -52,11 +52,11 @@
   border-radius: 50%;
   background: transparent;
   border: none;
-  color: $color-white;
+  color: var(--header-text);
   cursor: pointer;
   transition: background $transition-fast;
 
-  &:hover { background: rgba($color-white, 0.2); }
+  &:hover { background: var(--header-overlay); }
 
   svg { width: 8px; height: 14px; }
 }
@@ -81,7 +81,7 @@
     text-align: center;
     font-size: $font-size-xs;
     font-weight: $font-weight-bold;
-    color: rgba($color-white, 0.6);
+    color: var(--header-text-muted);
     padding: $space-1 0;
     text-transform: uppercase;
     letter-spacing: 0.04em;
@@ -103,18 +103,18 @@
   border-radius: $radius-md;
   font-size: $font-size-sm;
   font-weight: $font-weight-medium;
-  color: $color-white;
+  color: var(--header-text);
   cursor: pointer;
   transition: background $transition-fast;
   user-select: none;
 
   &:hover:not(&--other) {
-    background: rgba($color-white, 0.2);
+    background: var(--header-overlay);
   }
 
   // Tage aus Vor-/Nachmonat
   &--other {
-    color: rgba($color-white, 0.35);
+    color: var(--header-text-muted);
     cursor: default;
   }
 
@@ -131,7 +131,7 @@
 
   // Ausgewählter Tag
   &--active:not(&--today) {
-    background: rgba($color-white, 0.25);
+    background: var(--header-overlay);
     font-weight: $font-weight-bold;
   }
 }

httpdocs/assets/styles/components/_week-nav.scss

@@ -5,7 +5,7 @@
   display: flex;
   align-items: center;
   gap: $space-1;
-  background: rgba($color-white, 0.18);
+  background: var(--header-overlay);
   border-radius: $radius-pill;
   padding: $space-1 $space-2;
   backdrop-filter: blur(6px);
@@ -22,13 +22,13 @@
   border-radius: 50%;
   background: transparent;
   border: none;
-  color: $color-white;
+  color: var(--header-text);
   cursor: pointer;
   text-decoration: none;
   flex-shrink: 0;
   transition: background $transition-fast;
 
-  &:hover { background: rgba($color-white, 0.2); }
+  &:hover { background: var(--header-overlay); }
 
   svg { width: 8px; height: 14px; }
 }
@@ -68,7 +68,7 @@
   user-select: none;
 
   &:hover:not(.week-nav__day--active) {
-    background: rgba($color-white, 0.15);
+    background: var(--header-overlay);
   }
 
   &--active {
@@ -89,13 +89,13 @@
 .week-nav__day-name {
   font-size: $font-size-sm;
   font-weight: $font-weight-bold;
-  color: $color-white;
+  color: var(--header-text);
   line-height: 1.2;
 }
 
 .week-nav__day-date {
   font-size: $font-size-xs;
-  color: rgba($color-white, 0.78);
+  color: var(--header-text-muted);
   line-height: 1.3;
 }
 
@@ -107,8 +107,8 @@
   width: 34px;
   height: 34px;
   border-radius: $radius-md;
-  background: rgba($color-white, 0.2);
-  color: $color-white;
+  background: var(--header-overlay);
+  color: var(--header-text);
   cursor: pointer;
   border: none;
   margin-left: $space-1;
@@ -118,5 +118,5 @@
   svg { width: 16px; height: 16px; pointer-events: none; }
 
   &:hover,
-  &--active { background: rgba($color-white, 0.35); }
+  &--active { background: var(--header-overlay); }
 }

httpdocs/assets/styles/sections/_home.scss

@@ -24,7 +24,7 @@
 .home-header__brand {
   font-size: $font-size-lg;
   font-weight: $font-weight-bold;
-  color: $color-white;
+  color: var(--header-text);
 
   span {
     font-weight: $font-weight-regular;

httpdocs/assets/styles/sections/_report.scss

@@ -22,7 +22,7 @@
 .report-header__title {
   font-size: $font-size-xl;
   font-weight: $font-weight-bold;
-  color: $color-white;
+  color: var(--header-text);
 }
 
 .report-header__right {
@@ -39,9 +39,9 @@
   padding: $space-2 $space-4;
   font-size: $font-size-sm;
   font-weight: $font-weight-medium;
-  color: rgba($color-white, 0.9);
-  background: rgba($color-white, 0.15);
-  border: 1px solid rgba($color-white, 0.25);
+  color: var(--header-text);
+  background: var(--header-overlay);
+  border: 1px solid var(--header-overlay);
   border-radius: $radius-pill;
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
@@ -160,7 +160,7 @@
   transition: background $transition-fast;
 
   &:hover {
-    background: rgba($color-primary, 0.035);
+    background: rgba(var(--color-primary-rgb), 0.05);
   }
 
   &:hover .report-action-btn {
@@ -179,7 +179,7 @@
   }
 
   &--editing {
-    background: rgba($color-primary, 0.04);
+    background: rgba(var(--color-primary-rgb), 0.05);
 
     .report-table__cell--actions {
       visibility: hidden;
@@ -312,7 +312,7 @@
 .report-row__edit {
   grid-column: 1 / -1;
   padding: $space-4 0;
-  background: rgba($color-primary, 0.025);
+  background: rgba(var(--color-primary-rgb), 0.04);
   border-top: 1px solid $color-border;
 }
 

httpdocs/assets/styles/sections/_timetracking.scss

@@ -30,14 +30,14 @@
 .tt-header__date {
   font-size: $font-size-lg;
   font-weight: $font-weight-bold;
-  color: $color-white;
+  color: var(--header-text);
   line-height: 1.2;
 }
 
 .tt-header__kw {
   font-size: $font-size-sm;
   font-weight: $font-weight-bold;
-  color: rgba($color-white, 0.75);
+  color: var(--header-text-muted);
   line-height: 1.3;
 }
 

httpdocs/assets/styles/themes/_minimal.scss

@@ -14,16 +14,17 @@ body[data-theme="minimal"] {
   .hamburger-nav {
     display: flex;
     justify-content: flex-end;
-    padding: $space-3 $space-3 0;
+    padding: $space-4 $space-4 $space-5;
   }
 
   // ── Page-Background weiß ───────────────────────────────────────────────────
   .tt-page { background: #fff; }
 
-  // ── TT-Header: kein Gradient, cleaner Rahmen ───────────────────────────────
+  // ── TT-Header: kein Gradient, kein Schatten, cleaner Rahmen ───────────────
   .tt-header {
     background: #fff;
-    box-shadow: 0 1px 0 $color-border;
+    box-shadow: none;
+    border-bottom: 1px solid $color-border;
     padding: $space-3 $space-5;
     min-height: auto;
     flex-direction: column;
@@ -31,6 +32,20 @@ body[data-theme="minimal"] {
     gap: 0;
   }
 
+  // Account/Report-Header: kein Schatten
+  .account-header,
+  .report-header {
+    box-shadow: none;
+  }
+
+  // Karten ohne Schatten
+  .account-card,
+  .crud-list,
+  .crud-create,
+  .entry-form {
+    box-shadow: none;
+  }
+
   // Standard-Meta und Collapsible umschalten
   .tt-header__meta      { display: none; }
   .tt-header__minimal-bar { display: flex; }
@@ -61,9 +76,9 @@ body[data-theme="minimal"] {
   // ── Greeting versteckt ─────────────────────────────────────────────────────
   .greeting { display: none; }
 
-  // ── Content zentriert und schmaler ────────────────────────────────────────
+  // ── Content zentriert, angenehme Breite ───────────────────────────────────
   .tt-content {
-    max-width: 520px;
+    max-width: 660px;
     padding: $space-6 $space-4;
     gap: $space-6;
   }
@@ -72,7 +87,6 @@ body[data-theme="minimal"] {
   .entry-form {
     background: #fff;
     border: none;
-    box-shadow: none;
     border-radius: 0;
     padding: $space-4 0;
   }
@@ -95,12 +109,12 @@ body[data-theme="minimal"] {
     padding: 0 $space-3;
   }
 
-  // Borderless inputs inside the entry form
+  // Borderless inputs inside the entry form — Markenfarbe statt hardcoded
   .entry-form .input,
   .entry-form .select {
     border: none;
     box-shadow: none;
-    background-color: $color-bg;
+    background-color: var(--color-bg);
 
     &:focus { box-shadow: none; }
   }
@@ -118,7 +132,19 @@ body[data-theme="minimal"] {
   // Bemerkung-Toggle-Row: standardmäßig sichtbar (im Standard ausgeblendet)
   .entry-form__note-toggle-row { display: flex; }
 
-  // ── Entry-List-Summary ─────────────────────────────────────────────────────
+  // ── Primärbutton in Minimal: Markenfarbe statt Orange ─────────────────────
+  .btn-primary {
+    background: var(--color-primary);
+    color: var(--header-text);
+    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.35);
+
+    &:hover {
+      background: var(--color-primary-dark);
+      box-shadow: 0 3px 12px rgba(var(--color-primary-rgb), 0.45);
+    }
+  }
+
+  // ── Entry-List ─────────────────────────────────────────────────────────────
   .entry-list__summary { display: block; }
 
   // Entry List standardmäßig versteckt (JS steuert)
@@ -127,16 +153,13 @@ body[data-theme="minimal"] {
   }
 
   .entry-list {
+    background: #fff;
     box-shadow: none;
     border: 1px solid $color-border;
     border-radius: $radius-md;
   }
 
   // ── Unterseiten (Report, Clients, etc.): nur Navigation ───────────────────
-  // Subpages übernehmen den Hamburger und das weiße Layout automatisch
-  // durch .main-nav { display: none } und .hamburger-nav { display: block }
-
-  // Report-Seite weißer Hintergrund
   .report-page,
   .crud-page,
   .account-page,
@@ -153,19 +176,18 @@ body[data-theme="minimal"] {
 }
 
 .hamburger-nav__toggle {
-  width: 40px;
-  height: 40px;
-  border: 1px solid $color-border;
-  border-radius: $radius-md;
+  width: 52px;
+  height: 52px;
+  border: none;
+  border-radius: $radius-lg;
   background: #fff;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: $shadow-card;
   transition: background $transition-fast;
 
-  &:hover { background: $color-bg; }
+  &:hover { background: var(--color-bg); }
 }
 
 // Hamburger-Icon aus drei Balken
@@ -173,7 +195,7 @@ body[data-theme="minimal"] {
 .hamburger-nav__icon::before,
 .hamburger-nav__icon::after {
   display: block;
-  width: 18px;
+  width: 22px;
   height: 2px;
   background: $color-text-dark;
   border-radius: 2px;
@@ -190,16 +212,16 @@ body[data-theme="minimal"] {
     left: 0;
   }
 
-  &::before { top: -5px; }
-  &::after  { top:  5px; }
+  &::before { top: -6px; }
+  &::after  { top:  6px; }
 }
 
 // X-Icon wenn geöffnet
 .hamburger-nav__toggle[aria-expanded="true"] {
   .hamburger-nav__icon {
     background: transparent;
-    &::before { transform: translateY(5px)  rotate(45deg); }
-    &::after  { transform: translateY(-5px) rotate(-45deg); }
+    &::before { transform: translateY(6px)  rotate(45deg); }
+    &::after  { transform: translateY(-6px) rotate(-45deg); }
   }
 }
 
@@ -225,7 +247,7 @@ body[data-theme="minimal"] {
   text-decoration: none;
   transition: background $transition-fast, color $transition-fast;
 
-  &:hover { background: $color-bg; color: $color-text-dark; }
+  &:hover { background: var(--color-bg); color: $color-text-dark; }
 
   &--active {
     color: var(--color-primary);
@@ -281,7 +303,7 @@ body[data-theme="minimal"] {
   align-items: center;
   gap: $space-2;
   padding: $space-3 $space-4;
-  background: none;
+  background: #fff;
   border: 1px solid $color-border;
   border-radius: $radius-md;
   font-size: $font-size-base;
@@ -290,7 +312,7 @@ body[data-theme="minimal"] {
   cursor: pointer;
   transition: background $transition-fast;
 
-  &:hover { background: $color-bg; }
+  &:hover { background: var(--color-bg); }
 }
 
 .entry-list__summary-count { font-weight: $font-weight-bold; color: $color-text-dark; }
@@ -319,12 +341,12 @@ body[data-theme="minimal"] {
   border: none;
   padding: 0;
   font-size: $font-size-sm;
-  color: $color-primary;
+  color: $color-text-muted;
   cursor: pointer;
   font-weight: $font-weight-medium;
   transition: color $transition-fast;
 
-  &:hover { color: var(--color-primary-dark); }
+  &:hover { color: $color-text-dark; }
   &.is-open { color: $color-text-muted; }
 }
 

httpdocs/src/Service/BrandColorService.php

@@ -29,14 +29,20 @@ class BrandColorService
         [$h, $s, $l] = $this->hexToHsl($hex);
         [$r, $g, $b] = $this->hexToRgb($hex);
 
+        $brightness = ($r * 299 + $g * 587 + $b * 114) / 1000;
+        $isLight    = $brightness > 128;
+
         return [
-            'headerTo'     => $hex,
-            'headerFrom'   => $this->hslToHex($h, max(0, $s - 4),  $this->clamp($l + 13)),
-            'primary'      => $this->hslToHex($h, $s,               $this->clamp($l + 9)),
-            'primaryDark'  => $this->hslToHex($h, $s,               $this->clamp($l - 3)),
-            'primaryLight' => $this->hslToHex($h, max(0, $s - 5),   $this->clamp($l + 20)),
-            'bg'           => $this->hslToHex($h, max(0, $s - 30),  $this->clamp($l + 40)),
-            'rgb'          => "$r, $g, $b",
+            'headerTo'        => $hex,
+            'headerFrom'      => $this->hslToHex($h, max(0, $s - 4),  $this->clamp($l + 13)),
+            'primary'         => $this->hslToHex($h, $s,               $this->clamp($l + 9)),
+            'primaryDark'     => $this->hslToHex($h, $s,               $this->clamp($l - 3)),
+            'primaryLight'    => $this->hslToHex($h, max(0, $s - 5),   $this->clamp($l + 20)),
+            'bg'              => $this->hslToHex($h, max(0, $s - 30),  $this->clamp($l + 40)),
+            'rgb'             => "$r, $g, $b",
+            'headerText'      => $isLight ? '#1a2a3a' : '#ffffff',
+            'headerTextMuted' => $isLight ? 'rgba(26, 42, 58, 0.65)' : 'rgba(255, 255, 255, 0.75)',
+            'headerOverlay'   => $isLight ? 'rgba(0, 0, 0, 0.08)'    : 'rgba(255, 255, 255, 0.18)',
         ];
     }
 

httpdocs/templates/base.html.twig

@@ -19,6 +19,9 @@
             --color-header-to:     {{ _bp.headerTo }};
             --color-bg:            {{ _bp.bg }};
             --color-primary-rgb:   {{ _bp.rgb }};
+            --header-text:         {{ _bp.headerText }};
+            --header-text-muted:   {{ _bp.headerTextMuted }};
+            --header-overlay:      {{ _bp.headerOverlay }};
           }
         </style>
         {% endif %}