v6 Phase B: News-Magazin-Layout + Guide-Neubau (Tutorials)

- news.js: Magazin-Karten-Layout (Quell-Chip, Featured-Beitrag, 'fuer dich'-Marker) statt Liste.
- guides.js: praktische Tutorials/Workflows (erster Workflow, Kontext leeren, Agent noetig?,
  Auto-Swap, Tools optimal nutzen) + kompakte Konzept-Karten statt klobiger Akkordeons.
- components.css: .news-grid/.news-card + .concept-grid.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

static/css/components.css

@@ -186,6 +186,28 @@ button:disabled{opacity:.5;cursor:not-allowed}
 .modal-card p{margin:0 0 18px;color:var(--mut);font-size:13.5px;line-height:1.55}
 .modal-actions{display:flex;gap:10px;justify-content:flex-end}
 
+/* ---- News (Magazin) ---- */
+.news-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
+.news-card{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--line);
+  border-radius:var(--radius);padding:15px 17px;text-decoration:none;color:inherit;transition:.15s}
+.news-card:hover{border-color:var(--accent);background:var(--bg2)}
+.news-card.featured{grid-column:span 2}
+.news-meta{display:flex;align-items:center;gap:8px;font-size:11.5px}
+.news-src{color:var(--accent);font-weight:500}
+.news-rel{color:#7ee29a;background:rgba(63,185,80,.13);border-radius:5px;padding:1px 7px}
+.news-date{margin-left:auto;color:var(--dim);font-family:var(--mono)}
+.news-title{font-size:14px;line-height:1.45;color:var(--tx)}
+.news-card.featured .news-title{font-size:18px;font-weight:500;line-height:1.35}
+@media(max-width:620px){.news-card.featured{grid-column:span 1}}
+
+/* ---- Guide (Konzept-Karten) ---- */
+.concept-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
+.concept{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px}
+.concept h4{margin:0 0 6px;font-size:14px;font-weight:500;color:var(--tx)}
+.concept p{margin:0;font-size:13px;color:var(--mut);line-height:1.55}
+.tut-steps{padding-left:20px;line-height:1.85;margin:6px 0 0}
+.tut-steps li{margin-bottom:4px}
+
 /* ---- Toast ---- */
 .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--panel2);
   border:1px solid var(--line2);border-radius:10px;padding:11px 16px;font-size:13.5px;