[TASK] Change color and thickness of table of contents title (#681)

Resolves #625 
___

Replace orange color with dark gray, reduce font-size from 1.5em to
1.1em and increase font-weight from 600 to 700
Examples with longer title as provided in the source task:

BEFORE:
<img width="1187" alt="image"
src="https://github.com/user-attachments/assets/12dbb6c6-1b93-4307-a46f-c742d563fedb">


AFTER:
<img width="1187" alt="image"
src="https://github.com/user-attachments/assets/25fe5251-49a1-4547-b8fd-5e4b6da158cd">

---------

Co-authored-by: lina.wolf <[email protected]>

Author: mouflondarko

Documentation-rendertest/Index.rst

@@ -46,12 +46,16 @@ Within ddev
 
 -----
 
-..  rubric:: Pages
+..  toctree::
+    :caption: INTRODUCTION
+    :titlesonly:
+    :glob:
+
+    *
 
-..  rst-class::  compact-list
 ..  toctree::
+    :caption: HOWTOS
     :titlesonly:
     :glob:
 
     */Index
-    *

Documentation-rendertest/Page1.rst

@@ -0,0 +1,3 @@
+======
+Page 1
+======

Documentation-rendertest/Page2.rst

@@ -0,0 +1,3 @@
+======
+Page 2
+======

packages/typo3-docs-theme/assets/sass/layout/navigation/_main_navigation.scss

@@ -21,7 +21,7 @@
 .toc-header {
     display: flex;
     justify-content: space-between;
-    padding-left: calc(#{$spacer} / 2) ;
+    padding-left: calc(#{$spacer} / 1.5) ;
 }
 .main_menu {
     margin: $spacer 0;
@@ -121,13 +121,25 @@
 }
 a.toc-title-project {
     display: block;
-    font-size: 1.5em;
-    font-weight:$font-weight-bold;
+    position: relative;
+    font-size: 1.2em;
+    font-weight: 700;
     line-height: 1.25;
-    color: $primary;
+    color: $secondary;
     text-decoration: none;
+
+    &:before {
+        content: '';
+        width: 0.2em;
+        height: 100%;
+        background: $primary;
+        position: absolute;
+        top: 0;
+        left: -0.6em;
+    }
+
     &:hover {
-        color: darken($primary, 15%);
+        text-decoration: .1em underline;
     }
 }
 .toc-search {

packages/typo3-docs-theme/resources/public/css/theme.css

@@ -25481,7 +25481,7 @@ dl.field-list > dt:after {
 .toc-header {
   display: flex;
   justify-content: space-between;
-  padding-left: calc(1rem / 2);
+  padding-left: calc(1rem / 1.5);
 }
 
 .main_menu {
@@ -25576,14 +25576,24 @@ dl.field-list > dt:after {
 
 a.toc-title-project {
   display: block;
-  font-size: 1.5em;
-  font-weight: 600;
+  position: relative;
+  font-size: 1.2em;
+  font-weight: 700;
   line-height: 1.25;
-  color: #ff8700;
+  color: #333333;
   text-decoration: none;
 }
+a.toc-title-project:before {
+  content: "";
+  width: 0.2em;
+  height: 100%;
+  background: #ff8700;
+  position: absolute;
+  top: 0;
+  left: -0.6em;
+}
 a.toc-title-project:hover {
-  color: #b35f00;
+  text-decoration: 0.1em underline;
 }
 
 .toc-search {