# StartupMag Showcase – WordPress-kompatible Version

## So fügst du es ein:

### SCHRITT 1: CSS in WordPress Customizer
Gehe zu: **Design → Customizer → Zusätzliches CSS** und füge diesen Code ein:

„`css
/* StartupMag Showcase Styles */
.showcase-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 80px 20px 60px;
text-align: center;
margin-bottom: 40px;
border-radius: 10px;
}

.showcase-hero h1 {
font-size: 3em;
margin-bottom: 20px;
color: white;
}

.showcase-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 40px 0;
padding: 30px;
background: #f8f9fa;
border-radius: 10px;
}

.stat-box {
text-align: center;
padding: 20px;
background: white;
border-radius: 8px;
}

.stat-number {
font-size: 2.5em;
font-weight: bold;
color: #667eea;
}

.stat-label {
color: #666;
margin-top: 5px;
text-transform: uppercase;
font-size: 0.9em;
}

.showcase-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
margin: 40px 0;
}

.showcase-card {
background: white;
border: 1px solid #e0e0e0;
border-radius: 10px;
padding: 30px;
transition: all 0.3s;
}

.showcase-card:hover {
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
transform: translateY(-5px);
}

.company-logo {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
font-weight: bold;
margin-bottom: 20px;
}

.company-name {
font-size: 1.8em;
margin-bottom: 10px;
color: #1a1a1a;
}

.company-tagline {
color: #666;
line-height: 1.5;
margin-bottom: 20px;
}

.card-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin: 20px 0;
}

.card-stat {
font-size: 0.9em;
color: #666;
}

.btn-primary {
display: inline-block;
background: #667eea;
color: white;
padding: 12px 30px;
border-radius: 25px;
text-decoration: none;
transition: all 0.3s;
}

.btn-primary:hover {
background: #5968d1;
transform: translateY(-2px);
}

.cta-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 60px 30px;
border-radius: 10px;
text-align: center;
margin: 40px 0;
}

.cta-section h2 {
font-size: 2.5em;
margin-bottom: 20px;
color: white;
}

.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin: 40px 0;
}

.pricing-card {
background: white;
padding: 40px;
border-radius: 10px;
text-align: center;
border: 2px solid #e0e0e0;
}

.pricing-card.featured {
border-color: #667eea;
transform: scale(1.05);
}

.price {
font-size: 3em;
font-weight: bold;
color: #667eea;
margin: 20px 0;
}

@media (max-width: 768px) {
.showcase-grid {
grid-template-columns: 1fr;
}
.showcase-hero h1 {
font-size: 2em;
}
}
„`

—

### SCHRITT 2: Content in WordPress einfügen

Erstelle eine neue Seite und nutze diese **Block-Struktur**:

—

## Block 1: Überschrift
**StartupMag Showcase**

—

## Block 2: Cover-Block (für Hero)
– Hintergrundfarbe: Gradient Lila-Blau
– Text: „Verifizierte Startup-Profile“
– Untertitel: „Die wichtigsten Startups im Überblick“

—

## Block 3: Spalten-Block (4 Spalten für Stats)

**Spalte 1:**
– **47**
– Verifizierte Profile

**Spalte 2:**
– **12**
– Branchen

**Spalte 3:**
– **2.3 Mrd**
– Gesamt-Funding

**Spalte 4:**
– **8.500+**
– Arbeitsplätze

—

## Block 4: Überschrift
**Featured Startups**

—

## Block 5: Spalten-Block (3 Spalten für Cards)

**Spalte 1: Foundever**
– Logo: F
– 170.000 Mitarbeiter
– 45 Länder
– Customer Experience Leader
– [Profil ansehen →](/showcase/foundever)

**Spalte 2: TradeDock**
– Logo: T
– 45 Mitarbeiter
– Series A: 5M
– B2B Handelsplattform
– [Profil ansehen →](/showcase/tradedock)

**Spalte 3: GreenVolt**
– Logo: G
– 120 Mitarbeiter
– Series B: 15M
– KI-Energie-Lösungen
– [Profil ansehen →](/showcase/greenvolt)

—

## Block 6: Call-to-Action

### Dein Startup gehört hier rein!

Werde Teil des StartupMag Showcase. Professionelles MediaKit, maximale Sichtbarkeit, faire Preise.

[**Jetzt Profil erstellen →**](/showcase/anmelden)

—

## Block 7: Preistabelle

| **MediaKit** | **Bundle** | **Enterprise** |
|————-|———–|—————|
| 99€ | **1.399€** | Custom |
| ✓ Showcase-Profil | ✓ Alles aus MediaKit | ✓ Multi-Language |
| ✓ PDF-Download | ✓ 2.000+ Wörter Portrait | ✓ API-Access |
| ✓ Schema.org Basis | ✓ 15 FAQs | ✓ White-Label |
| ✓ 1 Jahr Hosting | ✓ AI-Optimierung | ✓ Dedizierter Manager |
| [Jetzt buchen](/mediakit) | [Bundle wählen](/bundle) | [Anfragen](/enterprise) |

—

## Alternative: Einfacher HTML-Code für Custom HTML Block

Falls du doch einen Custom HTML Block verwenden willst, hier eine **vereinfachte Version ohne Inline-Styles**:

„`html

Featured Startups

„`