Überarbeitete Version der 1. Version. Es bestehen noch grosse Feher in einzelnen Skripten.

www/intern/css/einstellungen.css

@@ -1,16 +1,18 @@
 :root {
     --paddingSite: 40px;
-    --card-radius: 20px;
+    --card-radius: 24px;
     --card-bg: #ffffff;
-    --bg: #FDFDFD;
-    --card-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
-    --accent: #2d73ac;
+    --bg: #F4F3EF;
+    --card-shadow: 0 12px 40px rgba(0, 0, 0, 0.04);
+    --accent: #FF5A5F;
+    /* Soft energetic pink/red from Dribbble */
+    --accent-secondary: #FF8A65;
     --bg-top: rgb(54, 137, 13);
     --bg-top-raw: 54 137 13;
     --accent-soft: #f0f5ff;
-    --border-subtle: #d4d7e1;
-    --text-main: #191919;
-    --text-muted: #5e5e5e;
+    --border-subtle: #eaeaea;
+    --text-main: #1b1b1b;
+    --text-muted: #8A8A8A;
     --disabled-bg: #f3f4f6;
     --disabled-border: #cbd5f5;
 }
@@ -21,15 +23,6 @@
 *::after,
 *::before {
     box-sizing: border-box;
-    -webkit-tap-highlight-color: transparent;
-    font-family: "Google Sans Flex", sans-serif;
-    font-optical-sizing: auto;
-    font-style: normal;
-    font-variation-settings:
-        "slnt" 0,
-        "wdth" 100,
-        "GRAD" 0,
-        "ROND" 0;
 }
 
 html,
@@ -43,6 +36,7 @@ body {
     margin: 0;
     width: 100vw;
     background: var(--bg);
+    overflow-x: hidden;
 }
 
 ::selection {
@@ -80,7 +74,7 @@ input {
     background: none;
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 1081px) {
     .bgSection.open {
         width: calc(100vw - 380px);
         /* - 2 * var(--paddingSite) */
@@ -91,20 +85,44 @@ input {
 
 .headerDivTrainer {
     padding: var(--paddingSite);
-    background-color: var(--bg-top);
-    margin-bottom: var(--paddingSite);
+    padding-bottom: 10px;
+    background: transparent;
+    margin-bottom: 20px;
     position: relative;
     z-index: 3;
 }
 
+.dashboardGrid {
+    padding: 0 var(--paddingSite) var(--paddingSite);
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 30px;
+    align-items: start;
+    width: 100%;
+}
 
+.twoColumDiv {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+    align-items: start;
+    width: 100%;
+}
+
+@media (max-width: 1080px) {
+    .twoColumDiv {
+        grid-template-columns: 1fr;
+    }
+}
 
 /* headings */
 
 .containerHeading {
     margin-top: 0;
-    font-weight: 400;
-    margin-bottom: 20px;
+    font-weight: 600;
+    font-size: 20px;
+    margin-bottom: 24px;
+    color: var(--text-main);
 }
 
 .divLiveSyncronisation {
@@ -156,13 +174,15 @@ input {
 }
 
 .headingPanelDiv>* {
-    color: var(--bg);
+    color: var(--text-main);
 }
 
 .headingPanel {
     margin-top: 0;
     margin-bottom: 10px;
-    font-weight: 200;
+    font-size: 38px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
 }
 
 .headingPanelUser {
@@ -227,18 +247,21 @@ table {
 }
 
 .wkvsTabelle th {
-    color: #424242;
-    border-bottom: solid 1px #0000007d;
+    color: var(--text-muted);
+    border-bottom: solid 1px var(--border-subtle);
     font-weight: 600;
-    padding: 14px 15px;
-    font-size: 16px;
+    padding: 16px 15px;
+    font-size: 14px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    background: transparent;
 }
 
 .wkvsTabelle td {
-    background-color: #ffffff;
-    color: #191919;
-    font-weight: 400;
-    padding: 14px 15px;
+    background-color: transparent;
+    color: var(--text-main);
+    font-weight: 500;
+    padding: 16px 15px;
     background: none;
     text-align: center;
 }
@@ -248,7 +271,11 @@ table {
 }
 
 .wkvsTabelle td:not(.totalTd, .totalValue) {
-    border-bottom: solid 1px #6262624d;
+    border-bottom: solid 1px var(--border-subtle);
+}
+
+.wkvsTabelle tr:last-child td {
+    border-bottom: none;
 }
 
 /*.wkvsTabelle .totalValue {
@@ -290,14 +317,20 @@ table {
 /* Panel with inputs (new style, light) */
 
 .containerDiv {
+    background: var(--card-bg);
+    border-radius: var(--card-radius);
+    padding: 32px;
+    box-shadow: var(--card-shadow);
     color: var(--text-main);
     display: flex;
     flex-direction: column;
+    min-width: 0;
+    /* Critical for grid item content overflow */
 }
 
 .settingsGrid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    grid-template-columns: 1fr;
     gap: 20px;
     margin-bottom: 30px;
 }
@@ -309,38 +342,100 @@ table {
 }
 
 .settingsRow span {
-    font-size: 13px;
+    font-size: 16px;
     color: var(--text-muted);
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+    font-weight: 500;
+    margin-bottom: 2px;
 }
 
-.settingsRow input {
-    padding: 10px 14px;
-    border: 1px solid var(--border-subtle);
-    border-radius: 10px;
+.settingsRow input,
+.settingsRow select {
+    padding: 14px 18px;
+    border: none;
+    background: #F8F9FA;
+    border-radius: 12px;
     font-size: 15px;
     transition: all 0.2s ease;
-    background: #ffffff;
+    color: var(--text-main);
     width: 100%;
 }
 
-.settingsRow input:hover {
-    border-color: #adb5bd;
+.settingsRow input:hover,
+.settingsRow select:hover {
+    background: #F1F3F5;
 }
 
-.settingsRow input:focus {
-    border-color: var(--bg-top);
+.settingsRow input:focus,
+.settingsRow select:focus {
+    background: #FFFFFF;
     box-shadow: 0 0 0 4px rgba(var(--bg-top-raw), 0.1);
     outline: none;
 }
 
 .settingsRow input[type="color"] {
-    height: 42px;
-    padding: 4px;
+    height: 48px;
+    padding: 0px;
     cursor: pointer;
-    border-radius: 10px;
+    border-radius: 12px;
+    border: 1px solid #cacaca;
+    -webkit-appearance: none;
+    appearance: none;
+    /* Removes default Chrome/Safari styles */
+    cursor: pointer;
+    background: none;
+}
+
+
+/* Container for the color swatch (Chrome/Safari) */
+input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+
+/* The actual color area (Chrome/Safari) */
+input[type="color"]::-webkit-color-swatch {
+    border: none;
+    /* Makes the picker a circle */
+}
+
+/* The actual color area (Firefox) */
+input[type="color"]::-moz-color-swatch {
+    border: none;
+}
+
+.containerImages {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.containerImages span {
+    position: absolute;
+    bottom: 4px;
+    padding: 12px;
+    width: 100%;
+    text-align: center;
+    background-color: #00000063;
+    backdrop-filter: blur(2px);
+    border-radius: 0 0 7px 7px;
+    border-top: 1px solid #fff;
+    color: #fff;
+}
+
+.containerImages>div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+}
+
+.containerImages>div:last-child {
+    border-bottom: none;
+}
+
+.containerImages img {
+    width: 100%;
+    border-radius: 8px;
+    object-fit: cover;
 }
 
 .editContainerDivInner>form {
@@ -593,16 +688,19 @@ input[type="number"]::-webkit-outer-spin-button {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 28px;
-    height: 28px;
+    width: 44px;
+    height: 44px;
+    background: #FFFFFF;
+    border-radius: 50%;
     cursor: pointer;
     z-index: 99;
-    color: var(--bg);
+    color: var(--text-main);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
 }
 
 .trainerBurgerMenuDiv svg {
-    width: 100%;
-    height: 100%;
+    width: 24px;
+    height: 24px;
     stroke: currentColor;
     transition: transform 0.3s ease;
 }
@@ -975,8 +1073,8 @@ tr.rowStartgebuer::after {
 }
 
 .containerImages {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     align-items: flex-start;
     gap: 24px;
 }
@@ -984,11 +1082,9 @@ tr.rowStartgebuer::after {
 .containerImages div {
     display: flex;
     flex-direction: column;
-    padding: 16px;
-    border-radius: 16px;
-    border: 1px solid #1f1f1f;
     gap: 8px;
     align-items: flex-start;
+    position: relative;
 }
 
 .containerImages div input {
@@ -996,15 +1092,15 @@ tr.rowStartgebuer::after {
 }
 
 .containerImages div img {
-    max-height: 200px;
-    max-width: 200px;
     object-fit: contain;
     border-radius: 6px;
-    border: 1px solid var(--bg-top);
+    border: 1px solid #000000;
 }
 
 div.tableWraperOverflowY {
+    width: 100%;
     overflow-x: auto;
+    display: block;
 
     /* Prevent scroll chaining to body */
     overscroll-behavior-x: contain;
@@ -1039,4 +1135,42 @@ select {
 
 select:open {
     background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\<path d='M18 15L12 9L6 15' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\</svg>");
+}
+
+.firstDiv {
+    background: #ff9cde;
+    background: linear-gradient(151deg, rgba(255, 156, 222, 1) 0%, rgb(255 110 110) 50%, rgba(255, 182, 130, 1) 100%);
+}
+
+.firstDiv span {
+    color: #fff1fa !important;
+}
+
+.firstDiv h3 {
+    color: #ffffff !important;
+}
+
+.secondDiv {
+    background: #e0f7ff;
+    background: linear-gradient(150deg,rgba(224, 247, 255, 1) 0%, rgba(158, 226, 255, 1) 50%, rgba(182, 207, 252, 1) 100%);
+}
+
+.secondDiv span {
+    color: #171797 !important;
+}
+
+.secondDiv h3 {
+    color: #0f0f61 !important;
+}
+
+.settingsRowGroup {
+    display: grid;
+    gap: 18px;
+}
+span.light {
+    font-weight: 300;
+}
+
+.tableNoten input {
+    width: fit-content !important;
 }