update content

static/index.css

@@ -44,6 +44,112 @@
     transform: translateY(-5px);
 }
 
+
+/* Container-Grundlayout */
+.article-content {
+    max-width: 900px; /* Optimale Lesebreite */
+    margin: 2rem auto;
+    padding: 2rem;
+    line-height: 1.6;
+    color: var(--text-main);
+    background-color: var(--bg-card); /* Oder var(--bg-body) */
+    border-radius: 12px;
+    text-align: justify; /* Blocksatz wie gewünscht */
+    hyphens: auto;
+}
+
+/* Header-Hierarchie */
+.article-content h1, .article-content h2, .article-content h3, .article-content h4 {
+    color: var(--accent);
+    margin-top: 2.5rem;
+    margin-bottom: 1.2rem;
+    line-height: 1.2;
+    text-align: left; /* Header bleiben linksbündig */
+}
+
+.article-content h1 { font-size: 2.5rem; border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem; }
+.article-content h2 { font-size: 1.8rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3rem; }
+.article-content h3 { font-size: 1.4rem; }
+
+/* Absätze und Abstände */
+.article-content p {
+    margin-bottom: 1.5rem;
+}
+
+/* Listen-Styling */
+.article-content ul, .article-content ol {
+    margin-bottom: 1.5rem;
+    padding-left: 1.5rem;
+}
+
+.article-content li {
+    margin-bottom: 0.6rem;
+}
+
+/* Links */
+.article-content a {
+    color: var(--accent);
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: border-color 0.2s ease;
+}
+
+.article-content a:hover {
+    border-bottom-color: var(--accent);
+}
+
+/* Tabellen-Styling (Responsiv & Modern) */
+.article-content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 2rem 0;
+    font-size: 0.95rem;
+    background-color: var(--bg-section-alt);
+    border-radius: 8px;
+    overflow: hidden; /* Für abgerundete Ecken */
+}
+
+.article-content th, .article-contenttd {
+    padding: 12px 15px;
+    text-align: left;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.article-content th {
+    background-color: var(--accent);
+    color: #ffffff;
+    font-weight: bold;
+}
+
+.article-content tr:last-child td {
+    border-bottom: none;
+}
+
+.article-content tr:hover {
+    background-color: rgba(var(--accent-rgb), 0.05); /* Dezenter Hover-Effekt */
+}
+
+/* Medien: Bilder & Videos */
+.article-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin: 2rem 0;
+    display: block;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+}
+
+/* Zitate (Blockquotes) */
+.article-content blockquote {
+    margin: 2rem 0;
+    padding: 1rem 1.5rem;
+    border-left: 4px solid var(--accent);
+    background-color: var(--bg-section-alt);
+    font-style: italic;
+    color: var(--text-muted);
+}
+
+
 @media (max-width: 950px) {
     .hamburger { 
         display: flex !important; /* Hamburger nur auf Chat-Mobile zeigen */