🎨 style: update styles and layout in base templates and CSS files

static/css/base-styles.css

@@ -407,7 +407,7 @@ html.dark ::-webkit-scrollbar-thumb:hover {
     }
     
     .section-heading {
-        font-size: 1.5rem;
+        font-size: 1.75rem;
     }
 }
 
@@ -819,4 +819,199 @@ body:not(.dark) .user-dropdown {
 
 body:not(.dark) .user-dropdown-item:hover {
     background-color: #f3f4f6;
+}
+
+/* Medienabfragen für Responsivität */
+@media (max-width: 640px) {
+  /* Optimierungen für Smartphones */
+  body {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  
+  .container {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  
+  .hero-heading {
+    font-size: 2rem;
+  }
+  
+  .section-heading {
+    font-size: 1.75rem;
+  }
+  
+  .card, .panel, .glass-card {
+    padding: 1rem;
+    border-radius: 10px;
+  }
+  
+  .navbar {
+    padding: 0.75rem 1rem;
+  }
+  
+  /* Optimierte Touch-Ziele für mobile Geräte */
+  button, .btn, .nav-link, .menu-item {
+    min-height: 44px;
+    min-width: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  /* Verbesserte Lesbarkeit auf kleinen Bildschirmen */
+  p, li, input, textarea, button, .text-sm {
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+  
+  /* Anpassungen für Tabellen auf kleinen Bildschirmen */
+  table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+  
+  /* Optimierte Formulare */
+  input, select, textarea {
+    font-size: 16px; /* Verhindert iOS-Zoom bei Fokus */
+    width: 100%;
+  }
+  
+  /* Verbesserter Abstand für Touch-Targets */
+  nav a, nav button, .menu-item {
+    margin: 0.25rem 0;
+    padding: 0.75rem;
+  }
+}
+
+@media (min-width: 641px) and (max-width: 1024px) {
+  /* Optimierungen für Tablets */
+  .container {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+  
+  /* Zweispaltige Layouts für mittlere Bildschirme */
+  .grid-cols-1 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+  }
+  
+  /* Optimierte Navigationsleiste */
+  .navbar {
+    padding: 0.75rem 1.5rem;
+  }
+}
+
+@media (min-width: 1025px) {
+  /* Optimierungen für Desktop */
+  .container {
+    padding-left: 2rem;
+    padding-right: 2rem;
+    max-width: 1280px;
+    margin: 0 auto;
+  }
+  
+  /* Mehrspaltige Layouts für große Bildschirme */
+  .grid-cols-1 {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 2rem;
+  }
+  
+  /* Hover-Effekte nur auf Desktop-Geräten */
+  .card:hover, .panel:hover, .glass-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+  
+  /* Desktop-spezifische Animationen */
+  .animate-hover {
+    transition: all 0.3s ease;
+  }
+  
+  .animate-hover:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-lg);
+  }
+}
+
+/* Responsive design improvements */
+.responsive-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+}
+
+.responsive-flex {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.responsive-flex > * {
+  flex: 1 1 280px;
+}
+
+/* Accessibility improvements */
+.focus-visible:focus-visible {
+  outline: 2px solid var(--accent-primary-light);
+  outline-offset: 2px;
+}
+
+body.dark .focus-visible:focus-visible {
+  outline: 2px solid var(--accent-primary-dark);
+}
+
+/* Print styles */
+@media print {
+  body {
+    background: white !important;
+    color: black !important;
+  }
+  
+  nav, footer, button, .no-print {
+    display: none !important;
+  }
+  
+  main, article, .card, .panel, .container {
+    width: 100% !important;
+    border: none !important;
+    box-shadow: none !important;
+    color: black !important;
+    background: white !important;
+  }
+  
+  a {
+    color: black !important;
+    text-decoration: underline !important;
+  }
+  
+  a::after {
+    content: " (" attr(href) ")";
+    font-size: 0.8em;
+    font-weight: normal;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    page-break-after: avoid;
+    page-break-inside: avoid;
+  }
+  
+  img {
+    page-break-inside: avoid;
+    max-width: 100% !important;
+  }
+  
+  table {
+    page-break-inside: avoid;
+  }
+  
+  @page {
+    margin: 2cm;
+  }
 }