mobile optimization

httpdocs/assets/styles/atoms/_mixins.scss

@@ -51,3 +51,11 @@
   white-space: nowrap;
 }
 
+@mixin tablet {
+  @media (max-width: $bp-tablet) { @content; }
+}
+
+@mixin mobile {
+  @media (max-width: $bp-mobile) { @content; }
+}
+

httpdocs/assets/styles/atoms/_variables.scss

@@ -95,6 +95,10 @@ $transition-fast:   0.15s ease;
 $transition-base:   0.2s ease;
 $transition-slow:   0.3s ease;
 
+// ─── Breakpoints ─────────────────────────────────────────────────────────────
+$bp-tablet:  980px;
+$bp-mobile:  600px;
+
 // ─── Layout ──────────────────────────────────────────────────────────────────
 $header-height:     88px;
 $content-max-width: 860px;

httpdocs/assets/styles/components/_account.scss

@@ -10,6 +10,12 @@
 .account-header {
   @include section-header;
   padding: $space-6;
+
+  @include tablet {
+    flex-direction: column;
+    align-items: stretch;
+    gap: $space-3;
+  }
 }
 
 .account-header__title {
@@ -27,12 +33,21 @@
   gap: $space-1;
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
+
+  @include tablet {
+    width: 100%;
+  }
 }
 
 .account-tab {
   display: inline-flex;
   align-items: center;
   padding: $space-2 $space-5;
+
+  @include tablet {
+    flex: 1;
+    justify-content: center;
+  }
   font-size: $font-size-sm;
   font-weight: $font-weight-medium;
   color: var(--header-text-muted);
@@ -63,12 +78,18 @@
   display: flex;
   flex-direction: column;
   gap: $space-6;
+
+  @include tablet {
+    padding: 0 $space-4;
+  }
 }
 
 // ─── Karte ───────────────────────────────────────────────────────────────────
 .account-card {
   @include card;
   padding: $space-8;
+
+  @include tablet { padding: $space-6 $space-5; }
 }
 
 // ─── Formular-Grid ───────────────────────────────────────────────────────────
@@ -77,12 +98,23 @@
   grid-template-columns: 160px 1fr;
   gap: $space-4 $space-6;
   align-items: start;
+
+  @include tablet {
+    grid-template-columns: 1fr;
+    gap: $space-3;
+  }
 }
 
 .account-form__label {
   @include form-label;
   font-weight: $font-weight-medium;
   padding-top: 7px;
+
+  @include tablet {
+    text-align: left;
+    padding-right: 0;
+    padding-top: 0;
+  }
 }
 
 .account-form__field {
@@ -148,6 +180,12 @@
   margin-top: $space-2;
   padding-top: $space-4;
   border-top: 1px solid $color-border;
+
+  @include tablet {
+    flex-direction: column;
+
+    .btn { width: 100%; }
+  }
 }
 
 // ─── Toast ───────────────────────────────────────────────────────────────────

httpdocs/assets/styles/components/_crud.scss

@@ -6,6 +6,8 @@
   max-width: $content-max-width;
   margin: 0 auto;
   padding: $space-6;
+
+  @include tablet { padding: $space-4; }
 }
 
 .crud-page__header {
@@ -52,6 +54,8 @@
   padding: $space-4 $space-6;
   transition: background $transition-fast;
 
+  @include tablet { padding: $space-4; }
+
   &:hover {
     background: rgba(var(--color-primary-rgb), 0.05);
 
@@ -95,6 +99,7 @@
   &--delete:hover{ background: rgba($color-error, 0.1); color: $color-error; }
 
   @media (hover: none) { opacity: 1; }
+  @include tablet { opacity: 1; }
 }
 
 // ─── Edit-Formular innerhalb der Zeile ─────────────────────────────────────────
@@ -102,6 +107,8 @@
   padding: $space-4 $space-6;
   background: rgba(var(--color-primary-rgb), 0.04);
   border-top: 1px solid rgba($color-border, 0.5);
+
+  @include tablet { padding: $space-4; }
 }
 
 // ─── Create-Formular oben ──────────────────────────────────────────────────────
@@ -112,6 +119,8 @@
   display: none;
 
   &--visible { display: block; }
+
+  @include tablet { padding: $space-4; }
 }
 
 // ─── Tabs (Aktiv / Archiviert) ─────────────────────────────────────────────────

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

@@ -5,6 +5,8 @@
 .entry-form {
   @include card($color-card);
   padding: $space-6 $space-8;
+
+  @include tablet { padding: $space-5 $space-4; }
 }
 
 .entry-form__grid {
@@ -12,6 +14,11 @@
   grid-template-columns: 120px 1fr;
   gap: $space-4 $space-6;
   align-items: center;
+
+  @include tablet {
+    grid-template-columns: 1fr;
+    gap: $space-3;
+  }
 }
 
 .entry-form__label {
@@ -21,6 +28,11 @@
   text-align: right;
   padding-right: $space-2;
   white-space: nowrap;
+
+  @include tablet {
+    text-align: left;
+    padding-right: 0;
+  }
 }
 
 .entry-form__field {
@@ -51,6 +63,15 @@
     flex: 1;
     min-width: 180px;
   }
+
+  @include tablet {
+    flex-direction: column;
+
+    .select {
+      min-width: 0;
+      width: 100%;
+    }
+  }
 }
 
 .entry-form__actions {
@@ -59,6 +80,12 @@
   align-items: center;
   gap: $space-4;
   padding-top: $space-2;
+
+  @include tablet {
+    grid-column: 1;
+
+    .btn { width: 100%; }
+  }
 }
 
 // ─── Rate Mode (Radio: Default / Custom) ────────────────────────────────────

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

@@ -29,6 +29,8 @@
   justify-content: flex-end;
   padding: $space-3 calc(#{$space-8} + #{$icon-btn-size} + #{$icon-btn-size} + #{$space-2} + #{$space-2});
   border-top: 1px solid $color-border;
+
+  @include tablet { padding: $space-3 $space-4; }
 }
 
 .entry-list__total {
@@ -75,6 +77,10 @@
 
     .entry-row__btn { opacity: 1; }
   }
+
+  @include tablet {
+    padding: $space-4;
+  }
 }
 
 .entry-row__info {
@@ -126,6 +132,7 @@
   &--delete:hover{ background: rgba($color-error, 0.1); color: $color-error; }
 
   @media (hover: none) { opacity: 1; }
+  @include tablet { opacity: 1; }
 }
 
 // ─── Lock-Indikator (invoiced) ────────────────────────────────────────────
@@ -152,6 +159,8 @@
   padding: $space-4 $space-8;
   background: rgba(var(--color-primary-rgb), 0.04);
   border-top: 1px solid rgba($color-border, 0.5);
+
+  @include tablet { padding: $space-4; }
 }
 
 .entry-form__grid--inline {
@@ -159,4 +168,9 @@
   grid-template-columns: 130px 1fr;
   gap: $space-3 $space-6;
   align-items: center;
+
+  @include tablet {
+    grid-template-columns: 1fr;
+    gap: $space-3;
+  }
 }

httpdocs/assets/styles/components/_greeting.scss

@@ -1,4 +1,5 @@
 @use '../atoms/variables' as *;
+@use '../atoms/mixins' as *;
 
 // ─── Begrüßung zwischen Header und Formular ───────────────────────────────────
 .greeting {
@@ -7,6 +8,8 @@
   margin: 0 auto;
   padding: $space-5 $space-6 0;
 
+  @include tablet { padding: $space-4 $space-4 0; }
+
   &__text {
     font-size: $font-size-lg;
     font-weight: $font-weight-bold;

httpdocs/assets/styles/components/_login.scss

@@ -16,6 +16,12 @@
   padding: $space-10 $space-12;
   width: 100%;
   max-width: 540px;
+
+  @include tablet {
+    padding: $space-8 $space-5;
+    margin: $space-4;
+    max-width: calc(100% - #{$space-8});
+  }
 }
 
 .login-card__title {
@@ -43,11 +49,21 @@
   gap: $space-5 $space-4;
   align-items: center;
   margin-bottom: $space-5;
+
+  @include mobile {
+    grid-template-columns: 1fr;
+    gap: $space-3;
+  }
 }
 
 .login-form__label {
   @include form-label;
   font-size: $font-size-base;
+
+  @include mobile {
+    text-align: left;
+    padding-right: 0;
+  }
 }
 
 .login-form__field {
@@ -138,4 +154,6 @@
 .login-form__submit {
   padding: $space-3 $space-10;
   font-size: $font-size-md;
+
+  @include tablet { width: 100%; }
 }

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

@@ -1,4 +1,5 @@
 @use '../atoms/variables' as *;
+@use '../atoms/mixins' as *;
 
 // ─── Dunkle Top-Navigation ────────────────────────────────────────────────────
 .main-nav {
@@ -12,6 +13,8 @@
   position: sticky;
   top: 0;
   z-index: 200;
+
+  @include tablet { display: none; }
 }
 
 .main-nav__left,

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

@@ -17,6 +17,11 @@
     opacity 0.28s ease,
     transform 0.28s ease;
 
+  @include mobile {
+    width: calc(100vw - #{$space-8});
+    right: -#{$space-4};
+  }
+
   &--hidden {
     opacity: 0;
     transform: scaleY(0.92) translateY(-8px);

httpdocs/assets/styles/components/_register.scss

@@ -19,6 +19,8 @@
 .register-card {
   @include card($color-card-white, $radius-xl);
   padding: $space-10 $space-12;
+
+  @include tablet { padding: $space-8 $space-5; }
 }
 
 .register-card__brand {
@@ -114,6 +116,8 @@
   grid-template-columns: 1fr 1fr;
   gap: $space-4;
   margin-bottom: $space-5;
+
+  @include mobile { grid-template-columns: 1fr; }
 }
 
 // ─── Actions ──────────────────────────────────────────────────────────────────

httpdocs/assets/styles/components/_stopwatch.scss

@@ -88,6 +88,12 @@
   gap: $space-3;
   box-shadow: $shadow-calendar;
 
+  @include mobile {
+    width: calc(100vw - #{$space-8});
+    left: 0;
+    transform: none;
+  }
+
   &::before {
     content: '';
     position: absolute;

httpdocs/assets/styles/components/_team.scss

@@ -33,6 +33,11 @@
   max-width: 460px;
   padding: 0;
   overflow: hidden;
+
+  @include tablet {
+    margin: $space-4;
+    max-width: calc(100% - #{$space-8});
+  }
 }
 
 .modal-card__header {
@@ -78,6 +83,8 @@
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: $space-4;
+
+  @include mobile { grid-template-columns: 1fr; }
 }
 
 .form-field {

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

@@ -11,6 +11,11 @@
   padding: $space-1 $space-2;
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
+
+  @include tablet {
+    width: 100%;
+    justify-content: center;
+  }
 }
 
 // ─── Pfeile ──────────────────────────────────────────────────────────────────
@@ -58,6 +63,12 @@
   transition: background $transition-fast;
   user-select: none;
 
+  @include tablet {
+    width: auto;
+    flex: 1;
+    min-width: 0;
+  }
+
   &:hover:not(.week-nav__day--active) {
     background: var(--header-overlay);
   }

httpdocs/assets/styles/sections/_home.scss

@@ -37,6 +37,8 @@
   align-items: center;
   justify-content: center;
   padding: $space-12 $space-8;
+
+  @include tablet { padding: $space-8 $space-4; }
 }
 
 .home-hero__inner {
@@ -50,6 +52,8 @@
   color: $color-text-dark;
   line-height: 1.2;
   margin-bottom: $space-6;
+
+  @include mobile { font-size: 2rem; }
 }
 
 .home-hero__sub {
@@ -62,4 +66,6 @@
 .home-hero__cta {
   font-size: $font-size-md;
   padding: $space-4 $space-10;
+
+  @include tablet { width: 100%; }
 }

httpdocs/assets/styles/sections/_report.scss

@@ -10,6 +10,12 @@
 .report-header {
   @include section-header;
   padding: $space-4 $space-6;
+
+  @include tablet {
+    flex-direction: column;
+    align-items: stretch;
+    gap: $space-3;
+  }
 }
 
 .report-header__title {
@@ -22,6 +28,10 @@
   display: flex;
   align-items: center;
   gap: $space-4;
+
+  @include tablet {
+    flex-wrap: wrap;
+  }
 }
 
 // ─── Account-Name Anzeige ────────────────────────────────────────────────────
@@ -61,12 +71,18 @@
   width: 100%;
   margin: $space-6 auto;
   padding: 0 $space-6;
+
+  @include tablet {
+    padding: 0 $space-4;
+  }
 }
 
 // ─── Karte ───────────────────────────────────────────────────────────────────
 .report-card {
   @include card;
   overflow: hidden;
+
+  @include tablet { overflow-x: auto; }
 }
 
 // ─── Toolbar ─────────────────────────────────────────────────────────────────
@@ -76,6 +92,11 @@
   justify-content: space-between;
   padding: $space-3 $space-5;
   border-bottom: 1px solid $color-border;
+
+  @include tablet {
+    flex-wrap: wrap;
+    gap: $space-3;
+  }
 }
 
 .report-toolbar__left {
@@ -135,6 +156,8 @@
 // ─── Tabelle ─────────────────────────────────────────────────────────────────
 .report-table {
   width: 100%;
+
+  @include tablet { min-width: 900px; }
 }
 
 .report-table__head,
@@ -254,6 +277,8 @@
 
   svg { width: $icon-svg-size; height: $icon-svg-size; }
 
+  @include tablet { opacity: 1; }
+
   &:hover {
     color: $color-text-muted;
     background: rgba($color-text-dark, 0.06);
@@ -301,10 +326,20 @@
   gap: $space-3 $space-5;
   align-items: center;
   max-width: 680px;
+
+  @include tablet {
+    grid-template-columns: 1fr;
+    gap: $space-3;
+  }
 }
 
 .report-row__edit-label {
   @include form-label;
+
+  @include tablet {
+    text-align: left;
+    padding-right: 0;
+  }
 }
 
 .report-row__edit-field {
@@ -319,6 +354,15 @@
       flex: 1;
       min-width: 160px;
     }
+
+    @include tablet {
+      flex-direction: column;
+
+      .select {
+        min-width: 0;
+        width: 100%;
+      }
+    }
   }
 
   .textarea {
@@ -331,6 +375,12 @@
   display: flex;
   gap: $space-3;
   padding-top: $space-2;
+
+  @include tablet {
+    grid-column: 1;
+
+    .btn { flex: 1; }
+  }
 }
 
 // ─── Pagination-Footer ────────────────────────────────────────────────────────
@@ -409,12 +459,19 @@ button.report-toolbar__action {
 .report-filter__body {
   display: flex;
   gap: $space-10;
+
+  @include tablet {
+    flex-direction: column;
+    gap: $space-6;
+  }
 }
 
 .report-filter__col {
   flex: 1;
   min-width: 0;
   max-width: 66%;
+
+  @include tablet { max-width: 100%; }
 }
 
 .report-filter__heading {
@@ -437,6 +494,10 @@ button.report-toolbar__action {
 
   &:last-child { border-bottom: none; }
 
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+
   &--inactive {
     .filter-select,
     .filter-note-input,
@@ -505,6 +566,8 @@ button.report-toolbar__action {
   .filter-note-input {
     width: 300px;
     max-width: 100%;
+
+    @include tablet { width: 100%; }
   }
 
   &--period {

httpdocs/assets/styles/sections/_timetracking.scss

@@ -14,6 +14,13 @@
   position: sticky;
   top: 0;
   z-index: 100;
+
+  @include tablet {
+    flex-direction: column;
+    align-items: stretch;
+    gap: $space-3;
+    min-height: auto;
+  }
 }
 
 .tt-header__meta {
@@ -44,4 +51,8 @@
   display: flex;
   flex-direction: column;
   gap: $space-4;
+
+  @include tablet {
+    padding: $space-4;
+  }
 }

httpdocs/assets/styles/themes/_minimal.scss

@@ -173,8 +173,15 @@ body[data-theme="minimal"] {
 // ─── Hamburger-Nav (immer im DOM, per CSS im Standard versteckt) ──────────────
 
 .hamburger-nav {
-  display: none; // Standard: versteckt
+  display: none;
   position: relative;
+
+  @include tablet {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: $space-3 $space-4;
+  }
 }
 
 .hamburger-nav__toggle {
@@ -369,6 +376,10 @@ body[data-theme="minimal"] {
   display: flex;
   gap: $space-3;
   flex-wrap: wrap;
+
+  @include tablet {
+    flex-direction: column;
+  }
 }
 
 .theme-option {
@@ -383,6 +394,11 @@ body[data-theme="minimal"] {
   transition: border-color $transition-fast, background $transition-fast;
   user-select: none;
 
+  @include tablet {
+    min-width: 0;
+    width: 100%;
+  }
+
   input[type="radio"] { display: none; }
 
   &:hover { border-color: var(--color-primary-light); background: rgba($color-primary, 0.02); }

httpdocs/templates/base.html.twig

@@ -2,6 +2,7 @@
 <html>
     <head>
         <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>{% block title %}Welcome!{% endblock %}</title>
         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
         {% block stylesheets %}