fix Coding/UI

frontend/css/board.css

@@ -648,6 +648,7 @@
   min-height: 0;
   overflow-x: auto;
   padding: var(--spacing-4);
+  align-items: flex-start;
 }
 
 /* Column */
@@ -662,6 +663,7 @@
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-sm);
   flex-shrink: 0;
+  transition: width var(--transition-default), min-width var(--transition-default);
 }
 
 .column-header {
@@ -1259,3 +1261,90 @@
   font-size: var(--text-2xs);
   flex-shrink: 0;
 }
+
+/* ========================================
+   MULTI-COLUMN LAYOUT
+   ======================================== */
+
+/* Standard Layout (einspalltig) */
+.board .column-body {
+  flex: 1;
+  padding: var(--spacing-2);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+/* Base Multi-Column Layout - aktiviert das Feature, aber zeigt noch einspaltig */
+.board.multi-column-layout .column-body {
+  /* Bleibt erstmal bei flex layout bis Inhalt zu lang wird */
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+/* Dynamisch aktivierte 2-spaltige Ansicht (wenn Scrollen nötig wäre) */
+.board.multi-column-layout .column-body.dynamic-2-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-flow: row;
+  gap: var(--spacing-2);
+  align-content: start;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+/* Dynamisch aktivierte 3-spaltige Ansicht (wenn viel Inhalt) */
+.board.multi-column-layout .column-body.dynamic-3-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-auto-flow: row;
+  gap: var(--spacing-2);
+  align-content: start;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+/* Spalten-Breite wenn erweitert */
+.board.multi-column-layout .column {
+  transition: width var(--transition-default), min-width var(--transition-default);
+}
+
+.board.multi-column-layout .column.expanded-2x {
+  width: auto;
+  min-width: 560px;
+  max-width: 640px;
+}
+
+.board.multi-column-layout .column.expanded-3x {
+  width: auto;
+  min-width: 840px;
+  max-width: 960px;
+}
+
+/* Task Cards im Multi-Column Layout */
+.board.multi-column-layout .task-card {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Hover-Effekt für Layout-Toggle Button */
+#btn-toggle-layout {
+  transition: all var(--transition-fast);
+}
+
+#btn-toggle-layout:hover {
+  transform: rotate(90deg);
+}
+
+/* Active state indicator - korrigiert für richtige Selektion */
+.view-board.active .board.multi-column-layout ~ * {
+  /* Dummy rule to ensure the layout class is applied */
+}
+
+/* Layout toggle button active state */
+#btn-toggle-layout.active {
+  color: var(--primary);
+  background: var(--primary-light);
+}