responsive: 50 mobile CSS-Regeln — vollstaendig mobil-optimiert

- Header: kompakter (56px), Logo kleiner, Nav full-width + border
- Hero: Text kleiner (1.6rem), Padding reduziert
- Cards: garantierte Single-Column (!important), kleinere Paddings
- Article: Sidebar unter Content (nicht sticky), Tabellen horizontal scrollbar
- Typo: alle Schriftgroessen mobil angepasst
- CTA: Banner + Boxen schmaler, Buttons full-width
- FAQ: kompakter, Kontakt-iframe auf 600px
- Footer: reduzierte Groesse + Abstaende

app.py

@@ -141,12 +141,56 @@ def _base_template(title: str, content: str, active: str = "") -> str:
     .contact-info p{{margin-bottom:0.5rem}}
     @media(max-width:767px){{
       .menu-toggle{{display:block}}
+      .site-header{{padding:0 1rem;height:56px}}
+      .site-header .logo{{font-size:0.9rem}}
+      .site-header .logo::before{{width:22px;height:22px}}
       nav#mainNav{{display:none}}
-      nav#mainNav.open{{display:flex;flex-direction:column;position:fixed;top:64px;left:0;right:0;background:#fff;padding:1rem;gap:0.25rem;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,0.08)}}
+      nav#mainNav.open{{display:flex;flex-direction:column;position:fixed;top:56px;left:0;right:0;background:#fff;padding:0.75rem 1rem;gap:0;z-index:1000;box-shadow:0 8px 24px rgba(0,0,0,0.12);border-top:1px solid #e8ecf1;max-height:calc(100vh - 56px);overflow-y:auto}}
-      .hero h1{{font-size:2rem}}
+      nav#mainNav.open .nav-link{{padding:0.85rem 0.5rem;border-bottom:1px solid #f0f2f5;width:100%;border-radius:0;font-size:0.95rem}}
-      .hero{{padding:4rem 1.25rem}}
+      nav#mainNav.open .btn-primary{{margin:0.75rem 0 0 0;width:100%;text-align:center}}
-      .cta-inner{{flex-direction:column;text-align:center}}
+      .hero{{padding:3rem 1.25rem}}
-      .content h1{{font-size:1.75rem}}
+      .hero h1{{font-size:1.6rem}}
+      .hero p{{font-size:0.95rem}}
+      .hero .btn-large{{padding:0.75rem 1.5rem;font-size:0.9rem}}
+      .section{{padding:3rem 1rem}}
+      .section h2{{font-size:1.5rem;margin-bottom:1.5rem}}
+      .section-sub{{font-size:0.95rem;padding:0 0.5rem}}
+      .card-grid,.card-grid-4{{grid-template-columns:1fr!important;padding:0 1rem;gap:1rem}}
+      .card{{padding:1.25rem}}
+      .card h2,.card h3{{font-size:1.05rem}}
+      .card p{{font-size:0.9rem}}
+      .content{{padding:0 1rem;margin:2rem auto}}
+      .content h1{{font-size:1.5rem}}
+      .content h2{{font-size:1.25rem}}
+      .cta-inner{{flex-direction:column;text-align:center;gap:1.25rem}}
+      .cta-banner{{padding:2.5rem 1rem}}
+      .cta-text h2{{font-size:1.2rem}}
+      .cta-text p{{font-size:0.9rem}}
+      .article-layout{{grid-template-columns:1fr!important;padding:1.5rem 1rem;gap:1.5rem}}
+      .article-content h1{{font-size:1.5rem}}
+      .article-content h2{{font-size:1.2rem;margin:2rem 0 0.75rem}}
+      .article-content h3{{font-size:1.05rem}}
+      .article-content p{{font-size:0.95rem;line-height:1.7}}
+      .article-content p:first-of-type{{font-size:1rem}}
+      .article-content .meta{{font-size:0.8rem;flex-wrap:wrap;gap:0.75rem}}
+      .article-content blockquote{{padding:1rem;margin:1rem 0;font-size:0.9rem}}
+      .article-content .cta{{padding:1.5rem 1rem;margin:1.5rem 0;border-radius:10px}}
+      .article-content .cta p{{font-size:0.95rem}}
+      .article-content .cta a{{padding:0.65rem 1.5rem;font-size:0.9rem}}
+      .article-content .stat-card strong{{font-size:1.5rem}}
+      .article-content table{{font-size:0.8rem;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}
+      .article-content th,.article-content td{{padding:0.6rem 0.75rem;white-space:nowrap}}
+      .article-content th{{font-size:0.8rem}}
+      .article-content td{{font-size:0.8rem}}
+      .article-sidebar{{position:static!important;margin-top:1rem;border-radius:10px;padding:1rem}}
+      .sidebar-link{{font-size:0.85rem;padding:0.6rem 0}}
+      .faq-item{{padding:1rem;border-radius:8px}}
+      .faq-item summary{{font-size:0.95rem}}
+      .contact-info{{padding:1.25rem}}
+      .site-footer{{padding:2rem 1rem;font-size:0.8rem}}
+      .site-footer a{{margin:0 0.4rem}}
+      iframe{{height:600px!important}}
+      .btn-primary{{padding:0.7rem 1.5rem;font-size:0.9rem}}
     }}
   </style>
 </head>