+ {{ .Content }}
+
+
diff --git a/static/index.css b/static/index.css
index e647e2e..80c4275 100644
--- a/static/index.css
+++ b/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 */