XOLIB UI Audit — Elementanalyse & Layout-Templates¶
Basis: 53 Screenshots aller Haupt- und Unterseiten
Datum: 18.03.2026
Ziel: Wiederkehrende Elemente identifizieren, Gruppen bilden, Inkonsistenzen aufzeigen, einheitliche Layout-Templates ableiten
1. ELEMENT-INVENTAR — Was existiert?¶
1.1 Globale Navigation (auf JEDER Seite)¶
| Element | Beschreibung | Konsistenz |
|---|---|---|
| Top-Bar | Logo links, 3-Tab-Switch mittig (Briefing / KI-Cockpit / System), Suche + Notification + Avatar rechts | ✅ Konsistent |
| 3-Tab-Switch | Hauptnavigation zwischen den 3 Dashboard-Bereichen | ✅ Konsistent |
| Cmd+K Suche | Auf System-Seiten sichtbar | ⚠️ Nicht auf Briefing/KI-Cockpit sichtbar |
| KI aktiv Badge | Grüner Dot + "KI aktiv" Text | ⚠️ Nur auf manchen Seiten sichtbar |
1.2 Seiten-Header¶
| Variante | Vorkommen | Elemente |
|---|---|---|
| Standard | Objekte, Benutzer, Tickets, Finanzen, Dokumente, WEG, Gewerbe, Kalender | Breadcrumb + Icon + Titel + Subtitle + CTA-Button rechts |
| Mit Back-Button | Alle Unterseiten | ← Pfeil + Icon + Titel |
| Ohne Breadcrumb | Dashboard, Agents, KI-Aktivität | Nur Titel oder gar kein Header |
| Detail-Header | Property-Detail | Titel + ID-Badge + Adresse + Tags + Hero-Image + Action-Buttons (Bearbeiten/Archivieren) |
Inkonsistenz: Back-Button ist mal ein ←-Pfeil im Kreis, mal Text "← Objekte". Breadcrumb-Tiefe variiert (1–3 Levels).
1.3 KPI-Cards / Statistik-Blöcke¶
Das am häufigsten vorkommende Element — und gleichzeitig das chaotischste.
| Variante | Seiten | Layout |
|---|---|---|
| A: Gruppierte KPI-Bar | Properties, Users, Tickets, Documents, Certificates, Letters, WEG, Gewerbe, AI Activity, AI Models | 2 Gruppen nebeneinander (z.B. "PORTFOLIO" + "BELEGUNG & ZUSTAND"), je 2 KPIs pro Gruppe mit Donut-Icon |
| B: Score-Bar horizontal | Dashboard/System | 6 große Zahlen in einer Reihe (52 PORTFOLIO, 80 RISIKO, etc.) — buntes Farbschema |
| C: Einzelne KPI-Karten | Finanzen-Übersicht | Separate Boxen (GESAMT: 29, ZUGEORDNET: 0, OFFEN: 25, EINGÄNGE: 0,00€) — unterschiedliche Größen |
| D: Große Zahl + Chart | AI Models Provider Dashboard | 5 Karten mit Zahl + Mini-Sparkline |
| E: Nur Text-KPI | Finanzen-Objekte, Handwerker-Kosten | Inline-Zahlen ohne Box |
Inkonsistenzen: - Donut-Icons: Mal Halbkreis-Donut (Properties), mal Ring-Donut (Tickets), mal kein Icon (Finanzen Einzelkarten) - Farblogik: Grüne Zahlen = gut? Rote = schlecht? Wird nicht konsistent angewendet - Gruppierung: Manchmal 2er-Gruppen mit Label ("PORTFOLIO" / "BELEGUNG"), manchmal lose einzelne Karten - Größen: KPI-Karten haben mindestens 5 verschiedene Höhen/Breiten
1.4 Tab-Navigation (Seiten-Level)¶
| Variante | Seiten | Beschreibung |
|---|---|---|
| A: Primary Tabs | Properties (Objekte/Ankündigungen/Import/Schlüssel/Score), Finanzen (Finanzen/Betriebskosten/Heizkosten/Zähler), Documents (Dokumente/Bescheinigungen/Briefe), Users (Mieter/Eigentümer/Mitarbeiter/Handwerker) | Unterstrichene Text-Tabs, aktiver Tab = farbiger Unterstrich |
| B: Secondary Tabs | Finanzen Sub (Übersicht/Zahlungen/Bankabgleich/...), Handwerker Sub (KI-Analyse/Handwerker/Aufträge), Documents Sub (KI-Dashboard/Objektdokumente/Mieterdokumente) | Pill/Button-Style, aktiver Tab = gefüllte Box |
| C: Agent Tabs | Agent-System | Full-width Tabs (Uebersicht/Event-Flow/Learning Loop) |
| D: Detail-Tabs | Property Detail (Details & Karte/Einheiten/Fotos/Gebäudegesundheit) | Outline-Pill-Buttons |
| E: Calendar Tabs | Kalender | Pill mit Count-Badge (Woche 125, Liste 140, etc.) |
Inkonsistenzen: - 5+ verschiedene Tab-Styles im Einsatz - Badges (Counts) mal als roter Kreis, mal als grüner Kreis, mal als Text in Klammern - Aktiv-Zustand: Mal Unterstrich, mal gefüllte Box, mal Outline-Style - Manche haben 2 Tab-Ebenen (Finanzen: Primary + Secondary) — das System ist unklar
1.5 KI-Insight-Banner¶
| Variante | Seiten | Beschreibung |
|---|---|---|
| A: Expandierbarer Score-Banner | Properties, Users, Tickets, Documents, Certificates, Gewerbe | Farbiger Punkt + "Durchschn. Miete/qm — 9.00€" + Erklärungsbox (WAS WIRD GEMESSEN / ERGEBNIS / DATENGRUNDLAGE) mit ✕-Close |
| B: Warning-Banner | Property Detail | Gelber/Roter Balken "3 Einheiten leer — 2350 EUR/Monat entgangene Miete" |
| C: Gesundheits-Balken | Property Gebäudegesundheit, Documents | Progress-Bar Kritisch→Gut mit Prozent-Zahl |
Inkonsistenz: Banner A hat ein konsistentes 3-Spalten-Erklärungs-Pattern — gut! Aber das Design ist auf jeder Seite leicht anders positioniert.
1.6 Listen / Tabellen¶
| Variante | Seiten | Beschreibung |
|---|---|---|
| A: Card-Liste | Properties (mit Thumbnail), Dashboard-Tickets, Handwerker KI-Vorschläge | Volle Breite, Cards mit Mixed-Content |
| B: Klassische Tabelle | Zahlungen, Zähler, Einheiten-Tab | Header-Row + Daten-Rows mit Spalten |
| C: Simple Item-Liste | Risikoprofile, Beschlüsse, Bankkonten, Documents-Liste | Einzelne Zeilen mit wenig Daten |
| D: Activity-Feed | Dashboard KI-Cockpit (Letzte Aktivitäten) | Zeitstempel + Agent + Badge + Text |
| E: Ranking-Liste | Handwerker-Ranking, Agent-Übersicht | Nummerierte Items mit Score rechts |
Inkonsistenzen: - Suchfelder: Mal mit Filter-Button, mal ohne, mal mit Dropdown-Filtern, mal mit Checkbox-Filtern - Sortierung: Keine sichtbare Sort-UI auf den meisten Listen - Paginierung: Nur bei Zahlungen sichtbar ("Seite 1/2 Zurück/Weiter") - Hover/Selection-States: Nicht erkennbar in Screenshots - Card-Padding und Border-Radius: Variiert deutlich zwischen Seiten
1.7 Action-Elemente¶
| Element | Varianten |
|---|---|
| Primary CTA | Grüner Button "+" (+ Neues Objekt, + Neuer Benutzer, + Termin erstellen) — ⚠️ manchmal blau, manchmal grün |
| Secondary CTA | Outline-Buttons (Bearbeiten, Archivieren, Filter, CSV Export) |
| Inline Actions | "Beauftragen" bei Handwerkern, "Zuordnen/Ignorieren" bei Bankabgleich, "Löschen" in rot |
| AI Actions | "KI-Analyse starten", "Jetzt ausführen", "Analyse starten" |
| Context Menu | Drei-Punkte-Menü bei Gebäudegesundheit-Items |
Inkonsistenz: Primary-Button-Farbe wechselt zwischen Grün und Blau ohne erkennbares System.
1.8 Status-Badges¶
| Typ | Beispiele | Style |
|---|---|---|
| Priorität | CRITICAL (rot), HIGH (orange), MEDIUM (gelb), LOW (grau) | Pill-Badges mit Hintergrund |
| Status | In Bearbeitung, Wartend, Eskaliert, Erledigt, Beschlossen | Outline-Badges oder gefüllte Badges |
| Kategorie | Denkmalschutz, Energieausweis, Wartung, Versicherung, Heizung/Klima | Farbige Tags |
| Zustand | Guter Zustand (grün), Aufmerksamkeit erforderlich (orange), Wartung empfohlen (gelb), Überfällig (rot) | Mixed Styles |
| Mieter-Score | A/100 (grün), B/71 (orange) | Kreise mit Buchstabe + Zahl |
| Agent-Score | 89% (grün), 73% (gelb), etc. | Prozent + farbiger Ring |
Inkonsistenz: Mindestens 6 verschiedene Badge-Systeme ohne einheitliche Farblogik.
1.9 Formulare / Input-Seiten¶
| Seite | Elemente |
|---|---|
| Finanzen Import | Dropdown, Toggle (CSV/MT940), File-Upload, Textarea, Submit-Button |
| Letters Brief erstellen | (nicht im Detail sichtbar) |
| Kalender Termin erstellen | (nicht im Detail sichtbar) |
Beobachtung: Kaum Formular-Seiten in den Screenshots — entweder nutzt ihr Modals oder es fehlen noch Seiten.
1.10 Spezial-Elemente¶
| Element | Seiten |
|---|---|
| Kalender-Grid | Kalender (Wochen-/Monats-Ansicht) |
| Agent-Cards Grid | Agent-System (4×3 Grid mit Agent-Karten) |
| Event-Flow Diagramm | Agent Event-Flow (vertikales Flussdiagramm) |
| Chat/Messaging | Dashboard Briefing (Ticket-Detail mit Nachrichten-Thread) |
| Bereiche-Grid | Dashboard System (3×3 Card-Grid als Bereichs-Navigation) |
| Map | Property Detail (Google Maps Integration) |
| Progress-Bars | Gebäudegesundheit, Dokumentenstatus |
| Cashflow-Prognose | Finanzen (horizontale Balken mit Best/Worst) |
| Umsatztrend | Finanzen (horizontale Bars pro Monat) |
| Provider-Verteilung | AI Models (Stacked Bar mit Prozent) |
2. ELEMENT-GRUPPEN — Wiederkehrende Patterns¶
Gruppe A: "Bereichs-Übersicht" (häufigstes Pattern)¶
Vorkommt auf: Objekte, Benutzer, Tickets, Finanzen, Dokumente, WEG, Gewerbe, Bescheinigungen, Briefe, KI-Aktivität, Kalender
Bestandteile: 1. Seiten-Header (Icon + Titel + Subtitle + CTA) 2. Primary Tabs 3. Secondary Tabs (optional) 4. KPI-Cards (2 Gruppen) 5. KI-Insight-Banner (optional) 6. Suchfeld 7. Filter-Tabs/Chips 8. Liste/Tabelle
Gruppe B: "Detail-Seite"¶
Vorkommt auf: Property-Detail, (zukünftig: Mieter-Detail, Ticket-Detail, etc.)
Bestandteile: 1. Back-Button + Titel + ID-Badge + Tags 2. Hero-Image (optional) 3. KPI-Strip (6 Inline-Werte) 4. Warning-Banner (optional) 5. Kommende Termine (optional) 6. Detail-Tabs 7. Content je nach Tab (Daten-Grid, Tabelle, Fotos, Health-Score)
Gruppe C: "Dashboard/Cockpit"¶
Vorkommt auf: Briefing, KI-Cockpit, System
Bestandteile: 1. Score-Bar / KPI-Strip 2. Suchfeld 3. Card-Grid (Bereiche) oder Feed-basiertes Layout 4. Agent-Übersicht (Sidebar-Style) 5. Activity-Feed
Gruppe D: "Daten-Tabelle"¶
Vorkommt auf: Zahlungen, Zähler, Bankabgleich, Einheiten-Tab
Bestandteile: 1. (KPI-Cards von Gruppe A als Kontext) 2. Filter-Chips 3. Suchfeld + Filter-Button 4. Tabelle mit Header + Pagination
Gruppe E: "KI/Agent-Seite"¶
Vorkommt auf: Agent-System, KI-Aktivität, AI Models
Bestandteile: 1. Eigenes Tab-System 2. KPI-Cards (spezieller Stil) 3. Agent-Grid oder Activity-Log 4. Spezial-Visualisierungen (Flow-Diagram, Provider-Charts)
3. INKONSISTENZEN — Kritische Probleme¶
🔴 Kritisch (sofort beheben)¶
-
KPI-Cards: 5+ verschiedene Varianten ohne System. Manche mit Donut, manche ohne. Verschiedene Höhen, Breiten, Gruppierungen. → Braucht EINE KPI-Card-Komponente mit max. 3 Varianten (Small/Medium/Large)
-
Tab-Navigation: 5 verschiedene Tab-Styles. Unklar, wann welcher Style verwendet wird. → Max. 2 Tab-Varianten: Primary (unterstrichener Text) + Secondary (Pill-Style)
-
Button-Farben: Primary CTA wechselt zwischen Grün und Blau. → EINE Primärfarbe, EINE Sekundärfarbe
-
Badge-System: 6+ verschiedene Badge-Styles für Status, Priorität, Kategorie, Score. → Einheitliches Badge-System mit klarer Farbzuordnung
🟡 Mittel (vor Go-Live)¶
- Suchfelder: Unterschiedliche Höhen, Placeholder-Texte, manche mit Icon, manche ohne, Filter-Buttons mal rechts, mal inline
- Listen-Layout: Card-Listen und Tabellen haben verschiedene Paddings, Spacings, Border-Radii
- Header-Struktur: Back-Button inkonsistent, Breadcrumb-Tiefe variiert
- Empty States: Nur auf wenigen Seiten (Wirtschaftsplan, Briefe) — Rest fehlt
- Pagination: Nur auf Zahlungen sichtbar — fehlt auf allen anderen Listen
🟢 Nice-to-have¶
- Responsive: Nicht erkennbar ob responsive — bei B2B Desktop-first ist das OK, aber sollte geplant sein
- Dark Mode: Alles ist dark — gibt es einen Light Mode? Falls nein, ist das Farbsystem zumindest konsistent?
- Hover/Active States: Nicht aus Screenshots erkennbar, aber müssen konsistent sein
4. LAYOUT-TEMPLATES — Empfehlung¶
Basierend auf der Analyse reichen 5 Templates für die gesamte App:
Template 1: "Bereichs-Übersicht" (ca. 60% aller Seiten)¶
┌──────────────────────────────────────────────────┐
│ Breadcrumb │
│ [←] [Icon] Titel [+ CTA] │
│ Subtitle │
├──────────────────────────────────────────────────┤
│ Tab A │ Tab B │ Tab C │ Tab D │
├──────────────────────────────────────────────────┤
│ Sub-Tab 1 │ Sub-Tab 2 │ Sub-Tab 3 (optional) │
├──────────────────────────────────────────────────┤
│ ┌─ GRUPPE A ─────────┐ ┌─ GRUPPE B ─────────┐ │
│ │ KPI 1 │ KPI 2 │ │ KPI 3 │ KPI 4 │ │
│ └─────────────────────┘ └─────────────────────┘ │
├──────────────────────────────────────────────────┤
│ [● KI-Insight-Banner — klickbar/expandierbar] │
├──────────────────────────────────────────────────┤
│ 🔍 Suche... [Filter] [Export]│
├──────────────────────────────────────────────────┤
│ Chip: Alle │ Chip: Status A │ Chip: Status B │
├──────────────────────────────────────────────────┤
│ ┌─ List Item ──────────────────────────────────┐ │
│ │ Content Status │ │
│ └──────────────────────────────────────────────┘ │
│ ┌─ List Item ──────────────────────────────────┐ │
│ │ Content Status │ │
│ └──────────────────────────────────────────────┘ │
├──────────────────────────────────────────────────┤
│ ← Seite 1/5 → │
└──────────────────────────────────────────────────┘
Verwendet von: Objekte, Benutzer, Tickets, Finanzen (alle Sub-Tabs), Dokumente, WEG, Gewerbe, Bescheinigungen, Briefe, Kalender (Liste), KI-Aktivität
Template 2: "Detail-Seite"¶
┌──────────────────────────────────────────────────┐
│ [← Zurück] [Bearbeiten] [...] │
│ [ID-0001] Titel │
│ Adresse · Meta · Tags │
├──────────────────────────────────────────────────┤
│ ┌─────────── Hero Image ──────────────────────┐ │
│ └─────────────────────────────────────────────┘ │
├──────────────────────────────────────────────────┤
│ KPI 1 │ KPI 2 │ KPI 3 │ KPI 4 │ KPI 5 │ KPI 6 │
├──────────────────────────────────────────────────┤
│ [⚠️ Warning-Banner] │
├──────────────────────────────────────────────────┤
│ 📅 Kommende Termine (n) Alle anzeigen │
│ ┌─ Termin ──────────────────────────────────┐ │
│ └────────────────────────────────────────────┘ │
├──────────────────────────────────────────────────┤
│ Tab A │ Tab B │ Tab C │ Tab D │
├──────────────────────────────────────────────────┤
│ │
│ Tab-Content │
│ │
└──────────────────────────────────────────────────┘
Verwendet von: Property-Detail, (zukünftig: Mieter-Detail, Ticket-Detail, Einheit-Detail, Vertrag-Detail)
Template 3: "Dashboard / Cockpit"¶
┌──────────────────────────────────────────────────┐
│ [Briefing] [KI-Cockpit] [System] │
├──────────────────────────────────────────────────┤
│ KPI │ KPI │ KPI │ KPI │ KPI │ KPI │
│ Subtitle-Zeile │
├──────────────────────────────────────────────────┤
│ 🔍 Suche... │
├──────────────────────────────────────────────────┤
│ │
│ Slide-spezifischer Content: │
│ - Briefing: Feed + Ticket-Panel │
│ - KI-Cockpit: Orchestrator + Agents │
│ - System: Bereiche-Grid │
│ │
├──────────────────────────────────────────────────┤
│ ● ● ● ← → Slides wechseln │
└──────────────────────────────────────────────────┘
Verwendet von: Dashboard (3 Slides)
Template 4: "Daten-Tabelle" (Sub-Template von #1)¶
┌──────────────────────────────────────────────────┐
│ (Header + Tabs von Template 1) │
├──────────────────────────────────────────────────┤
│ Filter-Chips: Alle │ Bezahlt │ Überfällig │ ... │
├──────────────────────────────────────────────────┤
│ Fällig │ Mieter │ Objekt │ Erwartet │ Status │
│──────────┼─────────┼─────────┼──────────┼────────│
│ 01.03. │ Ahmed │ Hans 12 │ 830€ │ ✓ │
│ 01.03. │ Julia │ Wolb 78 │ 1.100€ │ ✓ │
│ ... │ ... │ ... │ ... │ ... │
├──────────────────────────────────────────────────┤
│ Zurück Seite 1/2 Weiter│
└──────────────────────────────────────────────────┘
Verwendet von: Zahlungen, Zähler, Bankabgleich, Einheiten-Tab
Template 5: "KI/System-Seite" (Spezial)¶
┌──────────────────────────────────────────────────┐
│ Primary Tabs: Übersicht │ Flow │ Loop │
├──────────────────────────────────────────────────┤
│ │
│ Spezial-Content: │
│ - Agent-Grid (4×3 Cards) │
│ - Event-Flow-Diagramm │
│ - Provider-Dashboard (KPI + Cards) │
│ - Activity-Log mit Filtern │
│ │
└──────────────────────────────────────────────────┘
Verwendet von: Agent-System, AI Models, (zukünftig: Super-Admin)
5. NÄCHSTE SCHRITTE — Prioritäten¶
Phase 1: Design-System aufbauen (vor weiterer Feature-Arbeit)¶
- KPI-Card-Komponente vereinheitlichen → 3 Varianten (Compact/Standard/Large)
- Tab-Komponente auf 2 Varianten reduzieren (Primary/Secondary)
- Badge-System mit fester Farbzuordnung definieren
- Button-System mit klarer Primary/Secondary/Destructive-Hierarchie
- Suchfeld + Filter-Bar als wiederverwendbare Komponente
- Liste/Card-Komponente mit einheitlichem Padding/Spacing
Phase 2: Templates implementieren¶
- Template 1 "Bereichs-Übersicht" als Layout-Wrapper bauen
- Alle bestehenden Seiten auf Template 1 migrieren
- Template 2 "Detail-Seite" für Property-Detail + zukünftige Details
- Template 3 "Dashboard" stabilisieren
Phase 3: Cleanup¶
- Empty States für alle Listen
- Pagination auf alle Listen
- Konsistente Loading States
- Error States
6. ELEMENT-MATRIX — Welches Element auf welcher Seite¶
| Seite | KPI-Cards | Tabs L1 | Tabs L2 | KI-Banner | Suche | Filter | Liste | Tabelle | Pagination |
|---|---|---|---|---|---|---|---|---|---|
| Dashboard/Briefing | — | ✅ | — | — | — | ✅ | ✅ | — | — |
| Dashboard/KI-Cockpit | — | ✅ | — | — | — | ✅ | ✅ | — | — |
| Dashboard/System | ✅ | ✅ | — | — | ✅ | — | — | — | — |
| Objekte | ✅ | ✅ | — | ✅ | ✅ | ✅ | ✅ | — | — |
| Property-Detail | ✅ | — | ✅ | ✅ | — | — | — | ✅ | — |
| Benutzer | ✅ | ✅ | — | — | ✅ | ✅ | ✅ | — | — |
| Handwerker | ✅ | ✅ | ✅ | — | ✅ | ✅ | ✅ | — | — |
| Tickets | ✅ | — | — | ✅ | ✅ | ✅ | ✅ | — | — |
| Finanzen-Übersicht | ✅ | ✅ | ✅ | — | — | — | — | — | — |
| Finanzen-Zahlungen | — | ✅ | ✅ | — | — | ✅ | — | ✅ | ✅ |
| Finanzen-Bankabgleich | — | ✅ | ✅ | — | — | ✅ | ✅ | — | — |
| Finanzen-Konten | — | ✅ | ✅ | — | — | — | ✅ | — | — |
| Finanzen-Import | — | ✅ | ✅ | — | — | — | — | — | — |
| Finanzen-Risikoprofile | — | ✅ | ✅ | — | — | — | ✅ | — | — |
| Finanzen-Mieterhöhung | — | ✅ | ✅ | — | — | — | ✅ | — | — |
| Finanzen-Objekte | — | ✅ | ✅ | — | — | — | ✅ | — | — |
| Zähler | — | ✅ | ✅ | — | ✅ | ✅ | — | ✅ | — |
| Dokumente-Dashboard | ✅ | ✅ | ✅ | ✅ | — | — | ✅ | — | — |
| Dokumente-Liste | — | ✅ | ✅ | — | ✅ | ✅ | ✅ | — | — |
| Bescheinigungen | ✅ | ✅ | ✅ | — | — | — | ✅ | — | — |
| Briefe | ✅ | ✅ | ✅ | — | ✅ | ✅ | ✅ | — | — |
| WEG-Übersicht | ✅ | ✅ | — | — | — | — | ✅ | — | — |
| WEG-Beschlüsse | ✅ | ✅ | — | — | ✅ | ✅ | ✅ | — | — |
| WEG-Wirtschaftsplan | — | ✅ | — | — | — | — | — | — | — |
| Gewerbe | ✅ | ✅ | — | ✅ | — | — | ✅ | — | — |
| Kalender | ✅ | — | ✅ | — | ✅ | ✅ | — | — | — |
| Agent-System | — | ✅ | — | — | — | — | — | — | — |
| KI-Aktivität | ✅ | ✅ | — | — | — | ✅ | ✅ | — | — |
| AI Models | ✅ | ✅ | — | — | — | — | — | — | — |
Legende: ✅ = vorhanden, — = nicht vorhanden
7. ZUSAMMENFASSUNG¶
Hauptproblem: Die App hat ~15 verschiedene UI-Patterns für im Grunde 5 wiederkehrende Situationen. Jede Seite wurde einzeln gebaut statt auf einem gemeinsamen Layout-System.
Lösung: 6 Core-Komponenten standardisieren (KPI-Card, Tabs, Badge, Button, Suchfeld, Liste) + 5 Layout-Templates. Damit sind ~90% der App abgedeckt.
Aufwand-Schätzung: - Design-System-Komponenten: 2–3 Tage - Migration bestehender Seiten: 5–7 Tage - Ergebnis: Jede neue Seite braucht danach nur noch Content, kein Layout-Denken mehr