Session 2026-04-21: SEO, Wiki-Anreicherung, Training, Lober

SEO & Crawler:
- robots.txt, llms.txt, sitemap.xml (508 Seiten bei Google)
- SSR-Seiten: /info, /wiki/rassen, /wiki/rasse/{slug}, /knigge
- Open Graph, JSON-LD, Breadcrumbs in index.html

Navigation:
- Training unter "Mein Hund", Wissen collapsible
- Welcome-Seite und Landing-Page auf 5-Gruppen-Struktur

Wiki:
- KI-Anreicherung (Claude API): beschreibung, vorkommen_de, Steckbrief
- "So einen hab ich" / Züchter-Verzeichnis
- Scheduler: 50 Rassen beim Start, 20/Nacht

Training:
- Session-Logging (Erfolgsquote, Stimmung, Zufriedenheit)
- Virtueller KI-Trainer (6h-Cache)
- Trainingskalender (Habit-Tracker)
- Top-Training → automatischer Tagebucheintrag
- Gamification ohne Druck: Badges, Streak, Stats

Fortschritts-Lober:
- Jeden Montag 09:00: Claude schreibt Lob-Text pro Hund
- Push + Karte im Tagebuch

Monitoring:
- 4× täglich Status-Mail mit Scheduler-Status + Wiki-Fortschritt

backend/static/css/components.css

@@ -4824,6 +4824,79 @@ html.modal-open {
   color:     var(--c-text-secondary);
 }
 
+/* Detail Hero (neues Layout) */
+.wiki-detail-hero-photo-wrap {
+  width:         100%;
+  max-height:    240px;
+  overflow:      hidden;
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--space-3);
+  background:    var(--c-surface-2);
+}
+.wiki-detail-hero-photo-wrap .wiki-detail-photo {
+  width:         100%;
+  height:        240px;
+  object-fit:    cover;
+  object-position: center top;
+  margin-bottom: 0;
+  border-radius: 0;
+}
+
+/* Steckbrief-Grid */
+.wiki-steckbrief-grid {
+  display:               grid;
+  grid-template-columns: 1fr 1fr;
+  gap:                   1px;
+  background:            var(--c-border-light);
+  border:                1px solid var(--c-border-light);
+  border-radius:         var(--radius-md);
+  overflow:              hidden;
+  margin-bottom:         var(--space-4);
+}
+.wiki-steckbrief-item {
+  display:        flex;
+  flex-direction: column;
+  gap:            2px;
+  padding:        var(--space-2) var(--space-3);
+  background:     var(--c-surface);
+}
+.wiki-steckbrief-label {
+  font-size:   var(--text-xs);
+  color:       var(--c-text-muted);
+  font-weight: var(--weight-medium);
+}
+.wiki-steckbrief-value {
+  font-size:   var(--text-sm);
+  color:       var(--c-text);
+  font-weight: var(--weight-semibold);
+}
+
+/* Interesse-Section */
+.wiki-interesse-section {
+  background:    var(--c-surface-2);
+  border-radius: var(--radius-md);
+  padding:       var(--space-3);
+}
+.wiki-interesse-btn {
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-md);
+  background:    var(--c-surface);
+  color:         var(--c-text);
+  font-size:     var(--text-sm);
+  padding:       var(--space-2) var(--space-3);
+  cursor:        pointer;
+  transition:    background 0.15s, color 0.15s, border-color 0.15s;
+}
+.wiki-interesse-btn:hover {
+  border-color: var(--c-primary);
+  color:        var(--c-primary);
+}
+
+/* Züchter-Karten */
+.wiki-zuchter-card {
+  transition: background 0.15s;
+}
+
 .hdm-vote-rasse {
   font-size: var(--text-xs);
   color:     var(--c-text-secondary);

backend/static/css/layout.css

@@ -393,6 +393,48 @@
   margin-top:     var(--space-2);
 }
 
+.sidebar-section-toggle {
+  display:         flex;
+  align-items:     center;
+  justify-content: space-between;
+  width:           100%;
+  background:      none;
+  border:          none;
+  cursor:          pointer;
+  font-size:       var(--text-xs);
+  font-weight:     var(--weight-semibold);
+  color:           var(--c-text-muted);
+  text-transform:  uppercase;
+  letter-spacing:  0.08em;
+  padding:         var(--space-3) var(--space-3) var(--space-1);
+  margin-top:      var(--space-2);
+  border-radius:   var(--radius-sm);
+  transition:      color var(--transition-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+.sidebar-section-toggle:hover { color: var(--c-text); }
+.sidebar-section-toggle .wissen-caret {
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+.sidebar-section-toggle[aria-expanded="true"] .wissen-caret {
+  transform: rotate(90deg);
+}
+
+.sidebar-section-body {
+  display:        flex;
+  flex-direction: column;
+  gap:            var(--space-1);
+  overflow:       hidden;
+  max-height:     0;
+  opacity:        0;
+  transition:     max-height 0.25s ease, opacity 0.2s ease;
+}
+.sidebar-section-body.open {
+  max-height: 300px;
+  opacity:    1;
+}
+
 .sidebar-item {
   display:       flex;
   align-items:   center;