Semi-stable version with old variable names

www/intern/css/einstellungen.css

@@ -36,7 +36,6 @@ body {
     margin: 0;
     width: 100vw;
     background: var(--bg);
-    overflow-x: hidden;
 }
 
 ::selection {
@@ -190,13 +189,7 @@ input {
     font-weight: 700;
 }
 
-#wsInfo {
-    margin: 0;
-    font-weight: 300;
-    opacity: 0;
-    transition: all 2s ease;
-}
-
+/*
 td a {
     position: relative;
     color: var(--bg-top);
@@ -219,15 +212,7 @@ td a::after {
 td a:hover::after {
     transform: scaleX(1);
 }
-
-.payed {
-    color: #099d1f;
-}
-
-.notPayed,
-.inProcess {
-    color: #9d1d09;
-}
+*/
 
 /* Kampfrichter header layout */
 
@@ -1166,6 +1151,7 @@ select:open {
 .settingsRowGroup {
     display: grid;
     gap: 18px;
+    align-content: start;
 }
 span.light {
     font-weight: 300;
@@ -1173,4 +1159,154 @@ span.light {
 
 .tableNoten input {
     width: fit-content !important;
+}
+
+#css-editor-container {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.cm-editor {
+    height: 300px;
+}
+
+.cssCodeSaveBtn {
+    padding: 6px 12px; 
+    background: var(--bg-top); 
+    color: #fff; 
+    border: none; 
+    border-radius: 4px; 
+    cursor: pointer;
+}
+
+/* From Uiverse.io by alexmaracinaru */
+.newBtn {
+    cursor: pointer;
+    font-weight: 300;
+    transition: all 0.2s;
+    padding: 10px 20px;
+    border-radius: 100px;
+    background: #1d6c6f;
+    border: 1px solid transparent;
+    display: flex;
+    align-items: center;
+    font-size: 15px;
+    align-self: flex-start;
+    color: #fff;
+}
+
+.newBtn:disabled {
+    cursor: not-allowed;
+    background: #ccc;
+}
+
+.newBtn:not(:disabled):hover {
+    background: #1c8284;
+}
+
+.newBtn>svg {
+    width: 34px;
+    margin-left: 10px;
+    transition: transform 0.3s ease-in-out;
+}
+
+.newBtn:not(:disabled):hover svg {
+    transform: translateX(5px);
+}
+
+.newBtn:not(:disabled):active {
+    transform: scale(0.95);
+}
+
+input[type="file"]#importPresetInput {
+    display: block;
+    width: 100%;
+    margin-bottom: 20px;
+    padding: 10px;
+    border: 2px dashed #cbd5e0;
+    border-radius: 8px;
+    background-color: #fafafa;
+    cursor: pointer;
+}
+
+input[type="file"]#importPresetInput::file-selector-button {
+    background: #1d6c6f;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+.gridWKVSConfig {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 60px;
+}
+
+.importWKVSConfigDiv {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.displayDiv.displayDivSettings {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 16 / 11;
+}
+
+.displayDivSettings * {
+    transition: scale 0.6s ease;
+    scale: 1;
+}
+
+.hidden {
+    display: none !important;
+}
+
+.oneOneGridDisplay {
+    display: grid;
+    grid-template-columns: 1fr 450px;
+    column-gap: 40px;
+}
+
+@keyframes shakeHighlit {
+    0% {
+        transform: rotate(0deg);
+    }
+    25% {
+        transform: rotate(10deg);
+    }
+    75% {
+        transform: rotate(-10deg);
+    }
+    100% {
+        transform: rotate(0deg);
+    }
+}
+
+.scaled {
+    scale: 1.05;
+    animation-name: shakeHighlit;
+    animation-duration: 0.5s;
+}
+
+.subSettingsRowGroup .settingsRow span {
+    color: #36454f;
+}
+
+.subSettingsRowGroup {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
+    align-items: end;
+    gap: 16px 22px;
+    padding: 20px;
+    border: 1px solid #000;
+}
+
+.subSettingsRowGroup .settingsRow {
+    
 }