---
description: 
globs: 
alwaysApply: false
---
# Frontend-Struktur

Die Anwendung verwendet ein Flask-Jinja2-Template-System mit JavaScript-Erweiterungen:

## Template-Struktur
- `/templates`: Hauptverzeichnis für Jinja2-Templates
- `/templates/errors`: Fehlerseiten (404, 500, etc.)
- Layout-Templates für einheitliches Design

## Frontend-Assets
- `/static/css`: CSS-Dateien (mit Tailwind)
  - `/static/css/src`: Quell-CSS-Dateien
- `/static/js`: JavaScript-Dateien
  - `/static/js/modules`: Modulare JS-Komponenten
- `/static/img`: Bilder und grafische Elemente

## JavaScript-Funktionalität
- API-Integration: Asynchrone Kommunikation mit Backend
- Mindmap-Visualisierung: Interaktive Darstellung von Konzepten
- Benutzeroberflächen-Interaktivität: Drag & Drop, Tooltips, Modals

## CSS-Framework
- Tailwind CSS für responsive Design-Elemente
- TAILWIND CDN verwenden, nicht manuell build!

## Responsive Design
- Mobile-first Ansatz für verschiedene Gerätetypen
- Anpassungsfähiges Layout für verschiedene Bildschirmgrößen

## Zugänglichkeit
- Semantisches HTML für bessere Zugänglichkeit
- ARIA-Attribute für Screenreader-Unterstützung

## Internationalisierung
- Deutsche Benutzeroberfläche als Standard
- Vorbereitet für mehrsprachige Unterstützung