Update CSS to fix some ugly spots

frontend/src/assets/main.css

@@ -188,10 +188,13 @@ a:focus {
 .main-content {
   flex: 1;
   width: 100%;
-  height: calc(100vh - 60px);
-  margin-top: 10px; 
-  padding: 0;
+  height: calc(100vh - 60px - 40px); /*
+  /*margin-top: 10px; 
+  padding: 0;  */
   padding-bottom: 60px; /* Platz für das fixierte Submenu */
+  padding-top: 60px;    /* Platz für die Top-Navigation */
+  padding-left: 20px;   /* Etwas Innenabstand links */
+  padding-right: 10px;  /* Etwas Innenabstand rechts */
   overflow-y: auto;
   background-color: var(--color-background);
 }
@@ -208,10 +211,10 @@ a:focus {
 
 /* Global fullwidth page class for view components */
 .fullwidth-page {
-  width: 100%;
+  /*width: 100%;
   min-height: calc(100vh - 120px);
   padding: 20px;
-  box-sizing: border-box;
+  box-sizing: border-box;*/
 }
 
 /* Common Card Layouts */

frontend/src/components/CharacterCreation/CharacterSkills.vue

@@ -706,15 +706,17 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 /* All common styles moved to main.css */
 
 .fullwidth-page {
+  /*
   padding: 0 !important;
   margin: 0 !important;
   width: 100vw !important;
   max-width: 100vw !important;
   box-sizing: border-box !important;
+  */
 }
 
 .page-header {

frontend/src/components/CharacterCreation/CharacterSpells.vue

@@ -703,11 +703,13 @@ export default {
 }
 
 .fullwidth-page {
+  /* 
   padding: 0 !important;
   margin: 0 !important;
   width: 100vw !important;
   max-width: 100vw !important;
   box-sizing: border-box !important;
+  */
 }
 
 .page-header {

frontend/src/views/HelpView.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="fullwidth-page">
-    <div class="page-header">
+    <div class="page-header" style="flex-direction: row;">
       <button @click="$router.back()" class="btn btn-secondary back-button">
         ← {{ $t('common.back') }}
       </button>
-      <h2>{{ $t('help.title') }}</h2>
+      <h2 style="padding-top: 8px; padding-left: 10px;">{{ $t('help.title') }}</h2>
     </div>
 
     <div class="card">

frontend/src/views/SponsorsView.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="fullwidth-page">
-    <div class="page-header">
+    <div class="page-header" style="flex-direction: row;">
       <button @click="$router.back()" class="btn btn-secondary back-button">
         ← {{ $t('common.back') }}
       </button>
-      <h2>{{ $t('sponsors.title') }}</h2>
+      <h2 style="padding-top: 8px; padding-left: 10px;">{{ $t('sponsors.title') }}</h2>
     </div>
 
     <div class="card">

frontend/src/views/SystemInfoView.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="fullwidth-page">
-    <div class="page-header">
+    <div class="page-header" style="flex-direction: row;">
       <button @click="$router.back()" class="btn btn-secondary back-button">
         ← {{ $t('common.back') }}
       </button>
-      <h2>{{ $t('systemInfo.title') }}</h2>
+      <h2 style="padding-top: 8px; padding-left: 10px;">{{ $t('systemInfo.title') }}</h2>
     </div>
 
     <div class="card">