# PDF-Design: Modern Glassmorphism Layout

## Design-Konzept

Das PDF-Layout verwendet ein **modernes Glassmorphism-Design** — inspiriert von Apple Keynote-Slides und Behance Case Studies. Jede Seite besteht aus einem vollflächigen Hintergrundbild mit zwei **schwebenden Glass-Cards** (Titel oben, Beschreibung unten).

## Aufbau (Layer-System)

```
┌─────────────────────────────────┐
│  LAYER 1: Vollbild-Hintergrund  │  ← Edge-to-Edge Bild
│                                 │
│  LAYER 2: Oberes Dark-Overlay   │  ← Kontrast für Titelkarte
│  ┌───────────────────────────┐  │
│  │  ███ TITELKARTE (Glass) ███  │  ← Name + Jahr
│  └───────────────────────────┘  │
│                                 │
│          (Bild sichtbar)        │
│                                 │
│  LAYER 3: Unteres Dark-Overlay  │  ← Kontrast für Beschreibung
│  ┌───────────────────────────┐  │
│  │  ███ BESCHREIBUNG (Glass) ██ │  ← Bio-Text
│  └───────────────────────────┘  │
└─────────────────────────────────┘
```

## Glassmorphism-Technik (Build-Safe)

Jede Karte nutzt die `Decoration` API mit mehrfachen `.Before()` Layern:

```csharp
.Decoration(card =>
{
    // 1. Weicher Schatten (sehr dezent, außen)
    card.Before()
        .Border(4f).BorderColor("#18000000")
        .CornerRadius(20);

    // 2. Lichtkante (innerer Glas-Rim)
    card.Before()
        .Border(1f).BorderColor("#44FFFFFF")
        .CornerRadius(20);

    // 3. Halbtransparenter dunkler Hintergrund
    card.Before()
        .Background("#C8181828")
        .CornerRadius(20);

    // 4. Inhalt (Text)
    card.Content()
        .PaddingVertical(28)
        .PaddingHorizontal(36)
        .Column(inner => { /* ... */ });
});
```

## Design-Details

| Element | Stil |
|---------|------|
| **Name** | 36pt, ExtraBold, Uppercase, Weiß, Letter-Spacing 0.5 |
| **Trennlinie** | 1.5pt, halbtransparent Weiß (#55FFFFFF) |
| **Jahrgang** | 15pt, gedämpft (#CCFFFFFF), Letter-Spacing 1.5 |
| **Beschreibungs-Header** | 14pt, SemiBold, gedämpft, Letter-Spacing 2 |
| **Beschreibungstext** | 11pt, 1.5 Zeilenhöhe, leicht gedämpft (#E8FFFFFF) |
| **Titelkarte Radius** | 20px |
| **Beschreibungskarte Radius** | 16px |
| **Overlay oben** | 220pt Höhe, #99000000 |
| **Overlay unten** | 280pt Höhe, #AA000000 |
| **Seiten-Padding** | 40pt rundum |

## Vorteile dieses Ansatzes

- ✅ **100% Build-Safe**: Keine SkiaSharp-Abhängigkeit, rein QuestPDF Fluent API
- ✅ **Stabil auf jedem Bild**: Kontrast-Overlays garantieren Lesbarkeit
- ✅ **Visuell hochwertig**: Glasskarte + Tiefe + Typografie-Hierarchie
- ✅ **Strukturell unverändert**: Name oben, Beschreibung unten, Bild vollflächig

## Build-Befehl

```bash
dotnet build Server/SZUAbsolventenverein.Module.HallOfFame.Server.csproj
```

Letzte erfolgreiche Kompilierung: 19. Februar 2026 — 0 Fehler, 0 Warnungen.