add fernkampf attack and damage rolls

src/main.css

@@ -14,7 +14,7 @@
     & [data-action] {
         cursor: pointer;
 
-        &:hover {
+        &:not(button):hover {
             transform: scale(1.05);
         }
     }
@@ -58,6 +58,10 @@
         flex: 0;
     }
 
+    & .gap {
+        gap: 0.5rem;
+    }
+
     & .subgrid {
         display: grid;
         grid-template-rows:    subgrid;
@@ -105,7 +109,6 @@
 
     & .editable-input {
         flex: 1;
-        padding: 0px 3px;
 
         & input {
             border: none;
@@ -132,6 +135,7 @@
     & .item-image {
         width:  80px;
         height: 80px;
+        margin-right: 0.5rem;
     }
 
     & .die {
@@ -161,6 +165,9 @@
         &.die-attacke       { fill: #b22319; }
         &.die-parade        { fill: #388834; }
         &.die-trefferpunkte { fill: #0c0c0c; }
+        
+        &.die-fernkampf-attacke       { fill: #388834; }
+        &.die-fernkampf-trefferpunkte { fill: #0c0c0c; }
     }
 
     & .tabs {
@@ -194,10 +201,6 @@
             width:  40px;
             height: 40px;
         }
-
-        & .item-name {
-            gap: 0.5rem;
-        }
     }
 
     & .list-header {
@@ -231,6 +234,17 @@
         }
     }
 
+    &.Dialog > .window-content {
+        gap: 1rem;
+
+        & > :first-child {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 0.5rem;
+            align-items: center;
+        }
+    }
+
     & [data-application-part="Bewaffnung"] {
         & .tab {
             grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
@@ -302,4 +316,9 @@
             }
         }
     }
+
+    & .dsa41-calculation {
+        font-size: 18px;
+        padding-top: 0.5rem;
+    }
 }