Refactor ProspectContainer styles: improve SCSS structure for better readability and maintainability

FoodsharingSiegen.Server/Controls/ProspectContainer.razor.scss

@@ -1,12 +1,15 @@
-::deep a,
-::deep a.invert:hover{
+::deep a {
     color: #64ae24;
     display: block;
+
+    &.invert,
+    &:hover {
+        color: #533a20;
     }
 
-::deep a.invert,
-::deep a:hover {
-    color: #533a20;
+    &.invert:hover {
+        color: #64ae24;
+    }
 }
 
 .green {
@@ -22,34 +25,33 @@
     border-radius: 12px;
     margin: 0;
     padding: 1rem 1rem 0 1rem;
-}
 
     @media (max-width: 576px) {
-    .pc-main {
         padding: .5rem .5rem 0 .5rem;
     }
-}
 
-.pc-main.warning {
+    &.warning {
         -webkit-box-shadow: 0 0 9px 4px rgba(214,100,23,0.87);
         -moz-box-shadow: 0 0 9px 4px rgba(214,100,23,0.87);
         box-shadow: 0 0 9px 4px rgba(214,100,23,0.87);
     }
 
-.pc-main.deleted {
+    &.deleted {
         -webkit-box-shadow: 0 0 9px 4px rgb(214 23 23 / 87%);
         -moz-box-shadow: 0 0 9px 4px rgb(214 23 23 / 87%);
         box-shadow: 0 0 9px 4px rgb(214 23 23 / 87%);
     }
+}
 
 .complete {
     background: #76ff003b;
 }
 
 i.link {
-    cursor: pointer; color: #64ae24;
-}
+    cursor: pointer;
+    color: #64ae24;
 
-i.link:hover {
+    &:hover {
         color: #000;
     }
+}