12-05-2026 Frontend dev
This commit is contained in:
parent
405df0a122
commit
5b8bdf4182
779 changed files with 480564 additions and 6241 deletions
512
dev/frontend/Branchenseite _ Energie _ Klima _aktiv.html
Normal file
512
dev/frontend/Branchenseite _ Energie _ Klima _aktiv.html
Normal file
File diff suppressed because one or more lines are too long
BIN
dev/frontend/Branchenseite _ Energie _ Klima _aktiv.png
Normal file
BIN
dev/frontend/Branchenseite _ Energie _ Klima _aktiv.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
512
dev/frontend/Detailseite _ Pressemitteilung _aktiv.html
Normal file
512
dev/frontend/Detailseite _ Pressemitteilung _aktiv.html
Normal file
File diff suppressed because one or more lines are too long
BIN
dev/frontend/Detailseite _ Pressemitteilung _aktiv.png
Normal file
BIN
dev/frontend/Detailseite _ Pressemitteilung _aktiv.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,012 KiB |
495
dev/frontend/ENTWICKLUNGSKONZEPT-BusinessPortal24-Frontend.md
Normal file
495
dev/frontend/ENTWICKLUNGSKONZEPT-BusinessPortal24-Frontend.md
Normal file
|
|
@ -0,0 +1,495 @@
|
|||
# Entwicklungskonzept – BusinessPortal24 & Presseecho Frontend
|
||||
|
||||
> **Stand:** 12. Mai 2026
|
||||
> **Domains:** `businessportal24.test` / `businessportal24.com` · `presseecho.test` / `presseecho.com`
|
||||
> **Theme-Slugs:** `businessportal24` (warm-rotes Editorial) · `presseecho` (grünes Editorial)
|
||||
> **Assets-Dir (geteilt):** `public/build/web/`
|
||||
> **Ziel:** Editoriales DACH-Pressemitteilungs-Portal mit 1:1-Mockup-Umsetzung. Presseecho nutzt die **gleiche Komponenten-Architektur** wie BP24 und unterscheidet sich nur via Theme-Tokens + Brand-Konfiguration.
|
||||
|
||||
Dieses Dokument beschreibt den aktuellen Stand und die wichtigsten Architekturentscheidungen der BusinessPortal24- und Presseecho-Frontend-Entwicklung. Es ist die zentrale Anlaufstelle für alle, die im Frontend weiterarbeiten oder neue Seiten ergänzen.
|
||||
|
||||
---
|
||||
|
||||
## 1. Zielbild & Designreferenzen
|
||||
|
||||
Das Portal folgt einer **editorial-zeitungs-orientierten Ästhetik** mit ruhiger Beige-Surface, klarer Hierarchie über Typografie statt Cards und einer einzigen warm-roten Akzentfarbe.
|
||||
|
||||
| Datei | Zweck |
|
||||
| --- | --- |
|
||||
| `dev/frontend/Pass B _ _ Deutschland _aktiv.png` | Visuelle Referenz Desktop |
|
||||
| `dev/frontend/Pass B _ _ Deutschland _aktiv.html` | Roh-HTML-Export aus Figma (für strukturelle Analyse) |
|
||||
| `dev/frontend/Mobile _ Startseite.png` | Visuelle Referenz Mobile |
|
||||
| `dev/frontend/tailwind_v3/Startseite Tailwind.html` | **Master-Vorlage** der Implementierung (Tailwind v3 Export – sauberer, ohne Embedded-Bilder) |
|
||||
| `dev/frontend/tailwind_v3/Branchenseite Tailwind.html` | Vorlage Branchenseite (offen) |
|
||||
| `dev/frontend/tailwind_v3/Detailseite Tailwind.html` | Vorlage Detailseite Pressemitteilung (offen) |
|
||||
| `dev/frontend/tailwind_v3/Veröffentlichen Tailwind.html` | Vorlage Veröffentlichen-Landing (offen) |
|
||||
| `dev/frontend/Branchenseite _ Energie _ Klima _aktiv.png` / `.html` | Hochauflösende Branchen-Vorlage |
|
||||
| `dev/frontend/Detailseite _ Pressemitteilung _aktiv.png` / `.html` | Hochauflösende Detailseite-Vorlage |
|
||||
| `dev/frontend/Ver_ffentlichen _ Variante A _aktiv_.png` / `.html` | Veröffentlichen-Vorlage |
|
||||
| `dev/frontend/Umsetzungskonzept - Frontend BusinessPortal24 Startseite.md` | Historisches Detailkonzept zur Startseite |
|
||||
|
||||
**Verbindlich:** Die `tailwind_v3`-Exports sind die normative Referenz – sie enthalten alle Spacings, Schriftgrößen, Tracking-Werte und Farbtöne in Klartext. Das `.png` dient als visuelle Bestätigung.
|
||||
|
||||
---
|
||||
|
||||
## 2. Tech-Stack
|
||||
|
||||
- **Framework:** Laravel 12 (PHP 8.4)
|
||||
- **UI:** Livewire 4 + Volt 1 (single-file components)
|
||||
- **CSS:** Tailwind CSS v4 mit `@theme`-Tokens und scoped Layer-Komponenten
|
||||
- **Build:** Vite 6 (dualer Setup: `vite.web.config.js` Port 5178 / `vite.portal.config.js` Port 5177)
|
||||
- **Interaktivität:** Alpine.js v3 (initialisiert in `resources/js/app.js`)
|
||||
- **Icons:** Inline-SVG (Bunny-Fonts-Icons werden bewusst NICHT genutzt, um Render-konsistent zu bleiben)
|
||||
- **Fonts (Bunny.net):** `Inter Tight` (Sans), `Source Serif 4` (Serif), `JetBrains Mono` (Mono)
|
||||
- **Tests:** Pest 3 + PHPUnit 11
|
||||
- **Lint/Format:** Laravel Pint (`vendor/bin/pint --dirty --format agent`)
|
||||
|
||||
---
|
||||
|
||||
## 3. Domain-Routing
|
||||
|
||||
Das Portal nutzt das bestehende `ThemeServiceProvider`-System aus `CLAUDE.md`. Beide Domains teilen sich `build/web/`-Assets und unterscheiden sich nur in der geladenen Theme-CSS-Datei:
|
||||
|
||||
```
|
||||
Request (Host: businessportal24.test)
|
||||
→ ThemeServiceProvider erkennt Domain
|
||||
→ /config/domains.php liefert assets_dir = "build/web", theme = "businessportal24"
|
||||
→ routes/web.php · "/" gibt businessportal24.blade.php zurück, vorgeladen mit Daten aus $webHomeData(Portal::Businessportal24)
|
||||
→ resources/views/web/layouts/web-master.blade.php lädt theme-businessportal24.css + app.js
|
||||
|
||||
Request (Host: presseecho.test)
|
||||
→ /config/domains.php liefert theme = "presseecho"
|
||||
→ routes/web.php · "/" gibt presseecho.blade.php zurück, vorgeladen mit Daten aus $webHomeData(Portal::Presseecho)
|
||||
→ web-master.blade.php lädt theme-presseecho.css + app.js
|
||||
```
|
||||
|
||||
Lokale Domain-Simulation:
|
||||
- `.env`: `DEV_SIMULATE_DOMAIN=true`, `DEV_SIMULATED_DOMAIN=businessportal24.test|presseecho.test`
|
||||
- Alternativ: `?theme=businessportal24|presseecho` als Query-Parameter
|
||||
|
||||
### 3.1 Generischer Daten-Provider
|
||||
|
||||
Der Daten-Provider `$webHomeData(Portal $primaryPortal)` in `routes/web.php` ist **portal-agnostisch** und liefert für beide Domains die gleichen Variablen (`leadRelease`, `sideReleases`, `mostReadReleases`, `activeNewsrooms`, `industryIndex`, `homeStats`). Aufruf:
|
||||
|
||||
```php
|
||||
view('web.presseecho', $webHomeData(Portal::Presseecho));
|
||||
view('web.businessportal24', $webHomeData(Portal::Businessportal24));
|
||||
```
|
||||
|
||||
Die Trennung der Portale geschieht über `whereIn('portal', [$primaryPortal->value, Portal::Both->value])`.
|
||||
|
||||
### 3.2 Brand-Konfiguration
|
||||
|
||||
In `config/domains.php` liegt pro Domain ein **`brand`-Block**, der Komponenten dynamisch befüllt (Logo-Text, Tagline, Newsletter-Topics, Footer-Legal, Meta-Texte):
|
||||
|
||||
```php
|
||||
'presseecho' => [
|
||||
'theme' => 'presseecho',
|
||||
'brand' => [
|
||||
'name' => 'presseecho',
|
||||
'accent' => null, // kein Brand-Akzent (z.B. "24")
|
||||
'tagline_short' => 'Pressemitteilungen · DACH',
|
||||
'tagline_long' => 'Fachmeldungen aus Wirtschaft und Industrie ...',
|
||||
'footer_legal' => '© :year presseecho.com · Alle Rechte vorbehalten',
|
||||
'about_label' => 'Über presseecho',
|
||||
'meta_title' => '... – presseecho',
|
||||
'meta_description' => '...',
|
||||
'newsletter_topics' => [ ... ],
|
||||
],
|
||||
],
|
||||
'businessportal24' => [
|
||||
'theme' => 'businessportal24',
|
||||
'brand' => [
|
||||
'name' => 'businessportal',
|
||||
'accent' => '24', // markenrechtlicher Brand-Akzent
|
||||
...
|
||||
],
|
||||
],
|
||||
```
|
||||
|
||||
Komponenten (`site-header`, `site-footer`, `newsletter-strip`) lesen ihre Defaults aus `config('domains.domains.'.config('app.theme').'.brand', [...])`. Übergaben via `:brand="..."` überschreiben sie jederzeit.
|
||||
|
||||
---
|
||||
|
||||
## 4. Theme-System (Tailwind v4)
|
||||
|
||||
### Datei: `resources/css/web/theme-businessportal24.css`
|
||||
|
||||
Alle Designtokens liegen in einem `@theme`-Block:
|
||||
|
||||
```css
|
||||
@theme {
|
||||
/* Surfaces */
|
||||
--color-bg: #f6f4ef;
|
||||
--color-bg-elev: #fbfaf6;
|
||||
--color-bg-rule: #e5e0d5;
|
||||
--color-bg-rule-strong: #1c1a17;
|
||||
--color-bg-card-warm: #f1ece2; /* Warm-beige Anzeigen-Karten */
|
||||
--color-bg-card-warm-border: #d9cdb6;
|
||||
--color-topbar: #1a1f26;
|
||||
--color-topbar2: #232a33;
|
||||
|
||||
/* Ink (Text-Hierarchie) */
|
||||
--color-ink: #1c1a17;
|
||||
--color-ink-2: #3d3935;
|
||||
--color-ink-3: #6e6862;
|
||||
--color-ink-4: #9a958d;
|
||||
--color-ink-on-dark: #f6f4ef;
|
||||
--color-ink-on-dark-2: #b8b3aa;
|
||||
|
||||
/* Brand */
|
||||
--color-brand: #c84a1e;
|
||||
--color-brand-deep: #a23814;
|
||||
--color-brand-soft: #f4e5dd;
|
||||
--color-live: #e03a1a;
|
||||
--color-gain: #2e8540;
|
||||
--color-loss: #c8341e;
|
||||
--color-ok: #2e8540;
|
||||
|
||||
/* Editorial-Akzente (auf dunklem Grund / in Card-Warm) */
|
||||
--color-accent-warm: #ff8b6f; /* Eyebrows auf TopBar/Hero/Newsletter */
|
||||
--color-ink-on-dark-muted: #8a847b; /* gedämpfter Text auf Dunkel */
|
||||
--color-ink-on-dark-rule: #2a2723; /* feiner Trenner auf Dunkel */
|
||||
--color-bg-card-warm-hover: #ece5d5;
|
||||
--color-bg-card-warm-rule: #c8bda8; /* Hairline „Anzeige" innerhalb Card-Warm */
|
||||
--color-card-warm-cat: #6e6862;
|
||||
--color-card-warm-title: #3a332b;
|
||||
--color-feature-line: #a8c8a8; /* Decor-Linien im Feature-Bild-Fallback */
|
||||
--color-feature-dot: #c4dcc4;
|
||||
|
||||
/* Typo & Layout */
|
||||
--font-sans: "Inter Tight", "Söhne", Inter, system-ui, sans-serif;
|
||||
--font-serif: "Source Serif 4", "Source Serif Pro", Charter, Georgia, serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--container-layout: 1280px;
|
||||
}
|
||||
```
|
||||
|
||||
Daraus stehen Klassen wie `bg-bg`, `text-ink-3`, `border-bg-rule`, `text-brand`, `text-accent-warm`, `bg-card-warm-hover`, `max-w-layout`, `font-serif` automatisch zur Verfügung.
|
||||
|
||||
> **Wichtig:** Komponenten dürfen **keine Hex-Werte** mehr enthalten. Stattdessen die Tokens nutzen (`text-accent-warm`, `border-ink-on-dark-rule`, `text-card-warm-cat`, …). So bleibt der Theme-Wechsel zwischen BP24 und Presseecho ein reiner CSS-Switch.
|
||||
|
||||
### Wiederkehrende Komponenten-Klassen (in `@layer components`)
|
||||
|
||||
| Klasse | Verwendung |
|
||||
| --- | --- |
|
||||
| `.eyebrow` / `.eyebrow.muted` / `.eyebrow.on-dark` | 11px-Vor-Label uppercase (Brand-Farbe / Grau / `accent-warm` für Dunkel-Sektionen) |
|
||||
| `.bp-cat` | Kategoriekürzel 11px uppercase brand |
|
||||
| `.bp-tag` | Solid-Brand-Tag (z. B. „TOP-MELDUNG", „Top-Meldung") |
|
||||
| `.rule-strong` | 1 px-Hairline auf `--color-bg-rule-strong` |
|
||||
| `.rule` | 1 px-Hairline auf `--color-bg-rule` |
|
||||
| `.bg-topbar-grad` | 135°-Gradient TopBar → Topbar2 (TopBar, CTA, Footer, Newsletter) |
|
||||
| `.bg-feature-grad` | 135°-Gradient (Featured-Top-Bild-Fallback) |
|
||||
| `.bg-hero-grad` | 135°-Gradient (Hero-Bild-Fallback) |
|
||||
| `.ticker-marquee-track` | Endlos-Laufband (CSS-Keyframe `bp-ticker-marquee`, Dauer per `--bp-ticker-duration`, default 42 s; respektiert `prefers-reduced-motion`) |
|
||||
|
||||
### Utility-Klassen (in `@layer utilities`)
|
||||
|
||||
- `.pulse-dot` – 1.6 s ease-in-out Animation (Live-Ticker, „heute aktiv"-Badge)
|
||||
- `.tabular-nums` – `font-variant-numeric: tabular-nums`
|
||||
|
||||
Plus eine globale Regel:
|
||||
|
||||
```css
|
||||
[x-cloak] { display: none !important; } /* Alpine.js Init-Schutz */
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Komponenten-Architektur
|
||||
|
||||
### 5.1 Layout
|
||||
|
||||
```
|
||||
resources/views/web/layouts/web-master.blade.php
|
||||
└── @yield('content')
|
||||
```
|
||||
|
||||
Das Layout lädt das theme-spezifische CSS via `@vite`. Domain-spezifische Fonts werden nur für `businessportal24` von bunny.net gezogen.
|
||||
|
||||
### 5.2 Startseite
|
||||
|
||||
```
|
||||
resources/views/web/businessportal24.blade.php
|
||||
├── <x-web.site-header /> ← TopBar + Header + Nav + Live-Ticker
|
||||
├── <main>
|
||||
│ ├── <x-web.focus-hero /> ← „Im Fokus" Hero + Sidebar „Was sonst zählt"
|
||||
│ ├── <section> 1.7fr/1fr Grid
|
||||
│ │ ├── <livewire:web.press-release-feed />
|
||||
│ │ └── <aside>
|
||||
│ │ ├── <x-web.most-read />
|
||||
│ │ ├── <x-web.publisher-cta />
|
||||
│ │ └── <x-web.active-newsrooms />
|
||||
│ ├── <x-web.industry-spotlight />
|
||||
│ ├── <x-web.events-week />
|
||||
│ ├── <x-web.industry-index />
|
||||
│ ├── <x-web.newsletter-strip />
|
||||
│ └── <x-web.quality-summary />
|
||||
└── <x-web.site-footer />
|
||||
```
|
||||
|
||||
### 5.3 Komponenten-Übersicht
|
||||
|
||||
| Datei | Rolle | Datenquelle |
|
||||
| --- | --- | --- |
|
||||
| `site-header.blade.php` | Top-Utility-Bar (Datum + Ausgabe-Tabs + Sprache/Links), Brand-Header (Logo + Suche + Anmelden + Veröffentlichen), Unter-Nav. Inkl. **Such-Overlay** + **Burger-Mobile-Nav** via Alpine. | Statisch (Props) |
|
||||
| `live-ticker.blade.php` | Dunkler AD-HOC-Streifen mit Ticker-Items + DAX-Sparkline. | Mock (Props `ticker`, `marketIndex`) |
|
||||
| `focus-hero.blade.php` | Hauptmeldung (500 px Hero) + 4 Sidebar-Items „Was sonst zählt" + Anzeige. | echtes `leadRelease`, `sideReleases` → fallback Mockup |
|
||||
| `focus-side-item.blade.php` | Einzelnes Sidebar-Item (Nummerierung 01-04, 64×64-Bild, Verifiziert-Icon). | `release` ODER `mock` |
|
||||
| `focus-ad.blade.php` | Warm-beige Anzeigen-Karte mit Anzeige- + Ende-Anzeige-Hairlines. | Statisch / Props |
|
||||
| `press-release-feed.blade.php` (Volt) | Featured-Top + Liste + In-Feed-Anzeige + „Weitere Meldungen"-Button. Tabs: Alle / Heute / Diese Woche. **Pagination** via `WithPagination`. Empty-State liefert Mock-Top + Mock-Liste + Anzeige. | `PressRelease` mit `withCount`-Eager-Loading |
|
||||
| `feed-top-item.blade.php` | Featured-Eintrag mit 240×160-Bild. | `release` ODER `mock` |
|
||||
| `feed-item.blade.php` | Zeilen-Eintrag 60 px Zeit / 100 px Kat. / 1fr Titel. Optional „Empfehlung"-Badge. | `release` ODER `mock` |
|
||||
| `feed-ad.blade.php` | Inline-Anzeige mit Anzeige- + Ende-Anzeige-Hairlines. | Statisch / Props |
|
||||
| `most-read.blade.php` | Top 4 nach Hits mit horizontalem Brand-Balkenindikator. | `releases` → fallback Mockup |
|
||||
| `publisher-cta.blade.php` | Dunkle Call-to-Action mit Brand-Button + Sekundärlink. | Statisch (Props `submitHref`, `pricingHref`) |
|
||||
| `active-newsrooms.blade.php` | Newsroom-Liste mit Marken-Initial-Quadrat + Pulse-Badge „heute aktiv". | `companies` → fallback Mockup |
|
||||
| `industry-spotlight.blade.php` | „Heute im Fokus · Energie & Klima" – 3-Spalten-Stat-Grid + 3 Meldungen + warme Studien-Karte mit Brand-Topborder. | Aktuell Mockup |
|
||||
| `events-week.blade.php` | 7-Spalten-Grid „Termine & Events" mit „Heute"-Highlight und Pulse-Dot. | Aktuell Mockup |
|
||||
| `industry-index.blade.php` | „Branchen-Index" – 4×2 Grid mit Gain/Loss-Delta + Balkenindikator. | `industries` (Category-Counts) → fallback Mockup |
|
||||
| `newsletter-strip.blade.php` | Dunkles Newsletter-Panel mit Email-Form + Topic-Checkboxen (links Topic-Auswahl). | Aktuell Mockup |
|
||||
| `quality-summary.blade.php` | Warm-beige Card mit Schild-Icon zum Content-Score. | Statisch |
|
||||
| `site-footer.blade.php` | 4-Spalten-Footer + Bottom-Bar (AGB / Cookie / DSGVO). | Statisch |
|
||||
|
||||
Alle Komponenten haben **konsistente Konventionen**:
|
||||
- `cursor-pointer` + `hover:`-Variante + `transition-colors` auf jedem klickbaren Element
|
||||
- Bei Bild-Containern: `group` + `group-hover:scale-105` (subtiler Zoom)
|
||||
- Bei Listenelementen: `group` + `group-hover:text-brand` für den Titel
|
||||
- Alle Mockup-Inhalte sind als spätere Datenquellen markiert (Inline-Kommentare oder via Issue-Tracker)
|
||||
|
||||
---
|
||||
|
||||
## 6. Backend-Anbindung der Startseite
|
||||
|
||||
Datei: `routes/web.php` → Closure `$businessportalHomeData`
|
||||
|
||||
Liefert dem Blade-View folgende Variablen:
|
||||
|
||||
| Variable | Quelle | Verwendung |
|
||||
| --- | --- | --- |
|
||||
| `$leadRelease` | Neueste veröffentlichte BP24-PM | `focus-hero` Hero |
|
||||
| `$sideReleases` | Nächste 4 veröffentlichte PMs (ohne Lead) | `focus-hero` Sidebar |
|
||||
| `$mostReadReleases` | Top 4 nach `hits` | `most-read` |
|
||||
| `$activeNewsrooms` | Companies mit Press-Releases letzte 7 Tage, sortiert nach heute-aktiv | `active-newsrooms` (Mapped Array, kein Model) |
|
||||
| `$industryIndex` | Top-Level-Categories mit Recent/Previous-Count + Delta | `industry-index` (Mapped Array) |
|
||||
| `$homeStats` | publishedCount, publishedToday, archiveSince | `quality-summary` |
|
||||
|
||||
**SQLite-Kompatibilität:** Die `whereHas`-Bedingung für `activeNewsrooms` wurde bewusst ohne `HAVING` geschrieben, weil SQLite keine `HAVING`-Clauses ohne Aggregat unterstützt. Das ist relevant für die Test-Datenbank (`DB_DATABASE=testing`).
|
||||
|
||||
---
|
||||
|
||||
## 7. Responsive Strategie
|
||||
|
||||
| Breakpoint | Verhalten |
|
||||
| --- | --- |
|
||||
| `< sm` (< 640 px) | Kompaktes Datum, mini-Edition-Tabs (DE/AT/CH/EN), Such-Icon → Overlay, „PM"-Button kurz, Logo-Untertitel ausgeblendet |
|
||||
| `sm` (≥ 640 px) | Voller Logo-Untertitel, vollständige Buttons („Anmelden", „Veröffentlichen") |
|
||||
| `md` (≥ 768 px) | „Ausgabe"-Label sichtbar, inline-Suchfeld statt Icon-Button |
|
||||
| `lg` (≥ 1024 px) | Sprache „Deutsch" + Trennlinie + Newsletter/RSS/API sichtbar, horizontale Underline-Nav statt Burger, Live-Ticker DAX-Sparkline |
|
||||
| `xl` (≥ 1280 px) | `⌘K`-Hinweis im Suchfeld |
|
||||
|
||||
### Mobile Navigation
|
||||
|
||||
Bei `< lg` blendet sich die Underline-Nav aus und wird durch einen **Burger-Trigger** ersetzt, der die **aktuelle Rubrik** prominent anzeigt. Klick öffnet ein abgesetztes Dropdown (`absolute z-40`) mit allen Rubriken als vertikale Liste. Aktive Rubrik ist Brand-farben + Check-Icon. Esc-Taste, `@click.outside` und das ausgewählte Item schließen das Menü.
|
||||
|
||||
### Such-Overlay
|
||||
|
||||
Such-Icon-Button öffnet einen modalen Layer (`fixed inset-0 z-50 bg-ink/70 backdrop-blur-sm`) mit großem Suchfeld, das via Alpine `$watch + $refs` automatisch fokussiert wird. Esc oder Klick auf Backdrop schließt.
|
||||
|
||||
---
|
||||
|
||||
## 8. Tests
|
||||
|
||||
### Datei: `tests/Feature/Web/Businessportal24HomeTest.php`
|
||||
|
||||
Drei Test-Szenarien:
|
||||
|
||||
1. **`renders the editorial shell`** – Verifiziert Statik (Header, Sektionsüberschriften, Ticker, Newsletter, Quality-Summary). Stellt sicher, dass alte Marketing-Texte („führende Plattform", „maximale Reichweite", „Exklusiv-Interview") NICHT mehr erscheinen.
|
||||
2. **`feed only shows published businessportal content`** – Prüft Portal-Trennung (BP24 + Both sind sichtbar, Presseecho-Only und Drafts nicht).
|
||||
3. **`shows most read releases in the sidebar`** – Prüft Hits-Sortierung in der `most-read`-Komponente.
|
||||
|
||||
### Datei: `tests/Feature/Web/PresseechoHomeTest.php`
|
||||
|
||||
Drei spiegelbildliche Test-Szenarien:
|
||||
|
||||
1. **`renders the editorial shell`** – Identische Sektions-Checks, gegen `presseecho.test`.
|
||||
2. **`feed only shows published presseecho content`** – Portal-Trennung gespiegelt: Presseecho + Both sichtbar, BP24-Only und Drafts nicht.
|
||||
3. **`shows most read releases in the sidebar`** – Hits-Sortierung.
|
||||
|
||||
**Stand:** 6 passed (48 Assertions, beide Test-Dateien zusammen). Gesamt-Suite 215/216 (der eine Fail `ApiDocumentationTest` ist vorbestehend wegen fehlender `docs/api/v1.yml` und nicht UI-bezogen).
|
||||
|
||||
---
|
||||
|
||||
## 9. Build & Workflow
|
||||
|
||||
### Lokale Entwicklung
|
||||
|
||||
```bash
|
||||
npm run dev:web # Vite Dev Server für Web-Domains (Port 5178)
|
||||
npm run dev:portal # Vite Dev Server für Portal (Port 5177)
|
||||
npm run dev:all # Beide parallel
|
||||
```
|
||||
|
||||
### Production-Build
|
||||
|
||||
```bash
|
||||
NODE_OPTIONS="--max-old-space-size=4096" npm run build:web
|
||||
```
|
||||
|
||||
⚠️ **Build-Memory:** Ohne `--max-old-space-size=4096` bricht Vite mit Exit-Code 137 (OOM) ab, sobald Alpine.js + die volle Tailwind-v4-Pipeline kompiliert werden.
|
||||
|
||||
### Tests
|
||||
|
||||
```bash
|
||||
php artisan test --compact --filter=Businessportal24HomeTest
|
||||
```
|
||||
|
||||
### Lint
|
||||
|
||||
```bash
|
||||
vendor/bin/pint --dirty --format agent
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 10. Entwicklungsschritte (chronologisch)
|
||||
|
||||
| # | Datum | Schritt | Status |
|
||||
| --- | --- | --- | --- |
|
||||
| 1 | 12.05.2026 | Umsetzungskonzept erstellt + offene Fragen geklärt | ✅ |
|
||||
| 2 | 12.05.2026 | Mockup `Pass B _ _ Deutschland _aktiv` 1:1 in Blade/Volt überführt | ✅ |
|
||||
| 3 | 12.05.2026 | Theme-CSS auf v3-Mockup-Werte migriert (vollständiges Surface/Ink/Brand-System, Gradient-Klassen, `max-w-layout`) | ✅ |
|
||||
| 4 | 12.05.2026 | „Ende Anzeige"-Hairline für `focus-ad` ergänzt, In-Feed-Anzeigen im Feed auf eine reduziert (am Ende vor „Weitere Meldungen") | ✅ |
|
||||
| 5 | 12.05.2026 | `cursor-pointer` + Hover-Effekte konsistent auf allen klickbaren Elementen (Tabs, Cards, Links, Buttons, Newsletter-Topics) | ✅ |
|
||||
| 6 | 12.05.2026 | Responsive Header umgebaut: Burger-Mobile-Nav, Such-Overlay (Alpine.js), kompaktere TopBar, sichtbare Anmelden/Veröffentlichen-Buttons | ✅ |
|
||||
| 7 | 12.05.2026 | Edition-Tabs (DE/AT/CH/EN) auch auf mobile sichtbar | ✅ |
|
||||
| 8 | 12.05.2026 | Empty-State des Feeds liefert Mock-Top + Mock-Liste + Anzeige (analog Hero/Sidebar) | ✅ |
|
||||
| 9 | 12.05.2026 | Live-Ticker-Animationen: Ad-Hoc-Meldungen als Endlos-Laufband (`ticker-marquee-track`, respektiert `prefers-reduced-motion`), rechte Kurszeile blättert via Alpine alle 5,2 s vertikal durch | ✅ |
|
||||
| 10 | 12.05.2026 | Editorial-Akzente aus Hex-Hardcodings auf Theme-Tokens migriert (`accent-warm`, `ink-on-dark-muted`, `ink-on-dark-rule`, `card-warm-*`, `feature-*`) | ✅ |
|
||||
| 11 | 12.05.2026 | Presseecho-Theme angelegt (`theme-presseecho.css` – grüner Brand, gleiche Token-Namen) und Presseecho-Startseite auf BP24-Komponenten umgestellt (`presseecho.blade.php`) | ✅ |
|
||||
| 12 | 12.05.2026 | `routes/web.php`: Daten-Provider generalisiert zu `$webHomeData(Portal)` – beide Domains nutzen denselben Code-Pfad | ✅ |
|
||||
| 13 | 12.05.2026 | Brand-Konfiguration in `config/domains.php` pro Domain (`brand.name`, `brand.accent`, `brand.tagline_*`, `brand.newsletter_topics`, `brand.footer_legal`, `brand.about_label`) – `site-header`, `site-footer`, `newsletter-strip` lesen daraus | ✅ |
|
||||
| 14 | 12.05.2026 | `press-release-feed`-Volt-Component portal-agnostisch (Prop `:portal`); Aufruf vom View-Layer aus | ✅ |
|
||||
| 15 | 12.05.2026 | `PresseechoHomeTest` analog zu `Businessportal24HomeTest` (3 Szenarien, RefreshDatabase) | ✅ |
|
||||
| 16 | 12.05.2026 | **Aktuell offen:** Detailseite, Branchenseite, Veröffentlichen-Landing für beide Domains | 🟡 |
|
||||
|
||||
---
|
||||
|
||||
## 11. Roadmap & nächste Schritte
|
||||
|
||||
| Reihenfolge | Aufgabe | Vorlage | Status |
|
||||
| --- | --- | --- | --- |
|
||||
| 1 | **Mobile-Feinschliff Startseite** gegen `dev/frontend/Mobile _ Startseite.png` durchgehen, alle Sektionen testen (besonders 7-Spalten-Events und 4×2 Branchen-Index Stack-Behavior) | `Mobile _ Startseite.html` | 🟡 noch nicht final geprüft |
|
||||
| 2 | **Detailseite Pressemitteilung** umsetzen | `tailwind_v3/Detailseite Tailwind.html` + `Detailseite _ Pressemitteilung _aktiv.png` | 🔴 offen |
|
||||
| 3 | **Branchenseite Energie & Klima** umsetzen (Template für alle Kategorien) | `tailwind_v3/Branchenseite Tailwind.html` + `Branchenseite _ Energie _ Klima _aktiv.png` | 🔴 offen |
|
||||
| 4 | **Veröffentlichen-Landing** umsetzen (Variante A) | `tailwind_v3/Veröffentlichen Tailwind.html` + `Ver_ffentlichen _ Variante A _aktiv_.png` | 🔴 offen |
|
||||
| 5 | **Echte Datenquellen** für aktuell statische Komponenten anbinden: Live-Ticker (Ad-Hoc-Meldungen), Events-Week, Newsletter-Topics, Industry-Spotlight-Studie | – | 🔴 offen |
|
||||
| 6 | **Legacy-URL-Mapping** für Kategorien + Pressemitteilungen festlegen + Tests | siehe Umsetzungskonzept §13 | 🔴 offen |
|
||||
| 7 | **Presseecho-Ableitung** als zweites Web-Theme aus stabiler BP24-Basis | – | 🔴 offen |
|
||||
|
||||
**Reihenfolge-Begründung:** Erst wenn Detailseite + Branchenseite + Veröffentlichen vorhanden sind, sind die wiederverwendbaren Bausteine klar genug abstrahiert. Eine zu frühe Abstraktion auf Basis nur der Startseite würde Re-Work erzeugen.
|
||||
|
||||
---
|
||||
|
||||
## 12. Konventionen & Do/Don't
|
||||
|
||||
### ✅ Do
|
||||
|
||||
- **Mockup-Vorlage `tailwind_v3/...html` als Quelle der Wahrheit nutzen.** Spacings, Farben, Schriftgrößen 1:1 übernehmen.
|
||||
- **Eigene Tailwind-v4-Tokens** (`bg-bg`, `text-ink-3`, `border-bg-rule`, …) statt fester Hex-Werte verwenden – Ausnahme: TopBar-spezifische `#2A2723`, `#8A847B`, `#FF8B6F`, die ausschließlich auf dunklem Hintergrund vorkommen.
|
||||
- **`cursor-pointer` + `transition-colors`** auf jedem klickbaren Element (Buttons brauchen das wegen Tailwind-Preflight explizit).
|
||||
- **Mockup-Fallback** in Komponenten konsequent unterstützen (`@if ($release) … @else … @endif` oder Mock-Props), damit Empty-States nie „leer" wirken.
|
||||
- **Volt für interaktive Komponenten**, klassische Blade-Components für reine Darstellung.
|
||||
- **Tests bei jeder Änderung pflegen** – mindestens 1 Assertion pro neue sichtbare Sektion in `Businessportal24HomeTest`.
|
||||
- **Pint nach jeder PHP-Änderung** ausführen.
|
||||
- **Build mit `NODE_OPTIONS=--max-old-space-size=4096`** dokumentieren in Skripten / CI.
|
||||
|
||||
### ❌ Don't
|
||||
|
||||
- Keine FluxUI-Komponenten im Web-Bundle (nur im Portal verfügbar).
|
||||
- Keine Marketing-Phrasen wie „führende Plattform", „maximale Reichweite", „Exklusiv-Interview" – das war Pass A, wir sind auf Pass B.
|
||||
- Keine `HAVING`-Clauses ohne Aggregat (SQLite-Test-DB bricht).
|
||||
- Keine festen Pixel-Container > 1280 px (Layout-Token).
|
||||
- Keine Inline-`style="background-color:..."` für Theme-Farben – stattdessen `@theme`-Token verwenden.
|
||||
|
||||
---
|
||||
|
||||
## 13. Wiederkehrende Snippets
|
||||
|
||||
### Sektions-Header
|
||||
|
||||
```blade
|
||||
<section class="max-w-layout mx-auto px-8 mt-16">
|
||||
<header class="flex items-baseline justify-between mb-4 flex-wrap gap-3">
|
||||
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] text-ink">
|
||||
Sektionstitel <span class="text-brand">· Subtitle</span>
|
||||
</h2>
|
||||
<div class="eyebrow muted">Meta-Information</div>
|
||||
</header>
|
||||
<hr class="rule-strong">
|
||||
|
||||
{{-- ... --}}
|
||||
</section>
|
||||
```
|
||||
|
||||
### Feed-Listen-Item (60 / 100 / 1fr)
|
||||
|
||||
```blade
|
||||
<a href="#" class="grid items-baseline gap-4 py-3.5 border-b border-bg-rule cursor-pointer hover:bg-bg-elev transition-colors group"
|
||||
style="grid-template-columns: 60px 100px 1fr;">
|
||||
<span class="font-mono text-[12px] text-ink-3">14:18</span>
|
||||
<span class="bp-cat">Kategorie</span>
|
||||
<div>
|
||||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium text-ink group-hover:text-brand transition-colors">
|
||||
Titel der Meldung
|
||||
</div>
|
||||
<div class="text-[11px] text-ink-3 mt-1">Unternehmen · Stadt</div>
|
||||
</div>
|
||||
</a>
|
||||
```
|
||||
|
||||
### Anzeigen-Block (warm-beige)
|
||||
|
||||
```blade
|
||||
<div class="-mx-4 my-2">
|
||||
<div class="flex items-center gap-2.5 px-4">
|
||||
<span class="h-px flex-1 bg-bg-card-warm-rule"></span>
|
||||
<span class="text-[9px] font-bold tracking-[0.22em] uppercase text-ink-on-dark-muted">Anzeige</span>
|
||||
<span class="h-px flex-1 bg-bg-card-warm-rule"></span>
|
||||
</div>
|
||||
|
||||
<a href="#" rel="sponsored nofollow" class="block px-4 py-4 bg-bg-card-warm cursor-pointer hover:bg-bg-card-warm-hover transition-colors">
|
||||
{{-- Titel: text-card-warm-title; Kategorie/Meta: text-card-warm-cat --}}
|
||||
</a>
|
||||
|
||||
<div class="flex items-center gap-2.5 px-4">
|
||||
<span class="h-px flex-1 bg-bg-card-warm-rule"></span>
|
||||
<span class="text-[9px] font-bold tracking-[0.22em] uppercase text-ink-on-dark-muted">Ende Anzeige</span>
|
||||
<span class="h-px flex-1 bg-bg-card-warm-rule"></span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Dunkles Panel (Newsletter / CTA / Footer)
|
||||
|
||||
```blade
|
||||
<section class="bg-topbar-grad text-ink-on-dark p-12">
|
||||
<div class="eyebrow on-dark mb-3">Eyebrow</div>
|
||||
<h2 class="font-serif text-[30px] font-semibold text-white leading-[1.18] tracking-[-0.4px]">Headline</h2>
|
||||
{{-- ... --}}
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 14. Pflege dieses Dokuments
|
||||
|
||||
- **Wer ein neues Feature umsetzt:** Eintrag in Tabelle §10 ergänzen + ggf. §5.3 (Komponenten) und §11 (Roadmap) aktualisieren.
|
||||
- **Wer einen neuen Designtoken hinzufügt:** §4 aktualisieren.
|
||||
- **Wer eine neue Seite/Route ergänzt:** §3 (Routing) erweitern.
|
||||
- **Status-Indikator pflegen:**
|
||||
- ✅ erledigt und in Production-tauglichem Zustand
|
||||
- 🟡 in Arbeit oder Feinschliff nötig
|
||||
- 🔴 offen, noch nicht begonnen
|
||||
|
||||
Die `tailwind_v3`-Mockups sind die normative Quelle. Bei Konflikten zwischen `.png`, Roh-`.html` und `tailwind_v3/...html` gewinnt **immer** das `tailwind_v3/`-Pendant.
|
||||
512
dev/frontend/Mobile _ Startseite.html
Normal file
512
dev/frontend/Mobile _ Startseite.html
Normal file
File diff suppressed because one or more lines are too long
BIN
dev/frontend/Mobile _ Startseite.png
Normal file
BIN
dev/frontend/Mobile _ Startseite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 492 KiB |
512
dev/frontend/Pass B _ _ Deutschland _aktiv.html
Normal file
512
dev/frontend/Pass B _ _ Deutschland _aktiv.html
Normal file
File diff suppressed because one or more lines are too long
BIN
dev/frontend/Pass B _ _ Deutschland _aktiv.png
Normal file
BIN
dev/frontend/Pass B _ _ Deutschland _aktiv.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
|
|
@ -0,0 +1,669 @@
|
|||
# Umsetzungskonzept - Frontend BusinessPortal24 Startseite
|
||||
|
||||
**Stand:** 12. Mai 2026
|
||||
**Status:** Arbeits- und Umsetzungskonzept
|
||||
**Scope:** Startseite `businessportal24.test` / spaeter `businessportal24.com`
|
||||
**Referenzen:** `Pass B _ _ Deutschland _aktiv.html`, `Pass B _ _ Deutschland _aktiv.png`, `Mobile _ Startseite.html`, `Ver_ffentlichen _ Variante A _aktiv_.html`, Konzeptdokumente unter `docs/konzept/`
|
||||
|
||||
---
|
||||
|
||||
## 1. Ziel dieses Dokuments
|
||||
|
||||
Dieses Dokument uebersetzt das vorhandene Entwicklungskonzept und die Mockups in einen konkreten, abarbeitbaren Plan fuer die BusinessPortal24-Startseite.
|
||||
|
||||
Wichtig: Das Dokument ersetzt nicht die strategischen Konzepte, sondern passt sie an den realen Projektstand an. Im Projekt existieren bereits:
|
||||
|
||||
- ein Laravel-12-Backend mit Admin- und Customer-/Publisher-Bereichen,
|
||||
- eine migrierte Datenbasis fuer Pressemitteilungen, Kategorien, Kontakte, Firmen und Legacy-Bezuege,
|
||||
- eine config-basierte Multi-Domain-Struktur in `config/domains.php`,
|
||||
- ein Web-Frontend unter `resources/views/web` und `resources/views/livewire/web`,
|
||||
- ein separates Web-Asset-Bundle ueber `vite.web.config.js` und `tailwind.web.config.js`.
|
||||
|
||||
Das Ziel ist deshalb nicht, eine neue Multi-Brand-Architektur von null aufzubauen, sondern die bestehende Struktur zu konsolidieren, fachlich richtig auszurichten und die BusinessPortal24-Startseite aus dem Mockup heraus in echte Laravel-/Blade-/Volt-Komponenten zu ueberfuehren.
|
||||
|
||||
---
|
||||
|
||||
## 2. Relevante Ausgangslage
|
||||
|
||||
### 2.1 Strategische Leitplanken
|
||||
|
||||
BusinessPortal24 ist laut Positionierung kein allgemeines Magazin und kein Reichweiten-Versprechen. Die Marke steht fuer:
|
||||
|
||||
- aktuelle Unternehmens- und Wirtschaftsmeldungen,
|
||||
- Mittelstand, Selbststaendige, PR-Agenturen und regionale Akteure,
|
||||
- gepruefte Pressemitteilungen statt ungefiltertem SEO-Spam,
|
||||
- dauerhaft auffindbare Inhalte,
|
||||
- klare, sachliche, wirtschaftsnahe Tonalitaet.
|
||||
|
||||
Die Startseite muss deshalb eher wie ein dichter Wirtschaftsteil wirken als wie eine SaaS-Landingpage oder ein News-Magazin mit redaktionellen Versprechen.
|
||||
|
||||
Nicht verwenden:
|
||||
|
||||
- "fuehrende Plattform",
|
||||
- "maximale Reichweite",
|
||||
- "exklusive Interviews",
|
||||
- "Analysen" als redaktionelles Versprechen, wenn diese nicht operativ erstellt werden,
|
||||
- grosse Orange-/Rot-Gradienten als Hauptlook,
|
||||
- generische Stock-/SaaS-Optik,
|
||||
- harte Marketing-Funnels auf der Startseite.
|
||||
|
||||
### 2.2 Technischer Ist-Stand
|
||||
|
||||
Die Domain-Aufloesung ist aktuell config-basiert:
|
||||
|
||||
- `portal` nutzt `build/portal`, FluxUI und das Admin-/Publisher-Frontend.
|
||||
- `businessportal24` nutzt `build/web`, Theme `businessportal24`, View-Prefix `web`.
|
||||
- `presseecho` nutzt ebenfalls `build/web`, Theme `presseecho`, View-Prefix `web`.
|
||||
|
||||
Die aktuelle Web-Startseite ist unter `resources/views/web/businessportal24.blade.php` vorhanden. Sie nutzt:
|
||||
|
||||
- `web.layouts.web-master`,
|
||||
- Volt-Komponenten wie `livewire:web.header`, `livewire:web.filter-bar`, `livewire:web.press-releases-grid`, `livewire:web.footer`,
|
||||
- Blade-Komponenten wie `x-web.hero-banner`, `x-web.highlights-slider`, `x-web.section-header`, `x-web.pagination`.
|
||||
|
||||
Der aktuelle Stand ist aber noch stark mockdatengetrieben und stilistisch nicht voll kompatibel mit der neuen Positionierung.
|
||||
|
||||
### 2.3 Datenmodell-Realitaet
|
||||
|
||||
Die Migration ist nicht nur hypothetisch. Relevante Tabellen und Modelle existieren bereits:
|
||||
|
||||
- `press_releases` mit `portal`, `language`, `status`, `published_at`, `legacy_portal`, `legacy_id`,
|
||||
- `categories` mit `portal`, Parent-Struktur und Legacy-Bezug,
|
||||
- `press_release_images`,
|
||||
- `companies`, `contacts`, Footer-Codes, Newsletter und weitere Admin-/Customer-Strukturen.
|
||||
|
||||
Das `Portal`-Enum kennt `presseecho`, `businessportal24` und `both`. Die Startseite muss deshalb von Anfang an mit echten Eloquent-Daten gedacht werden, nicht als statische Marketingseite.
|
||||
|
||||
---
|
||||
|
||||
## 3. Anpassung des bisherigen Entwicklungskonzepts
|
||||
|
||||
Das vorhandene Konzept beschreibt eine Zielarchitektur mit `BrandResolver`, `Brand`-Model, Middleware, View-Overrides und einer moeglichen `brands`-Tabelle. Dieser Ansatz ist langfristig plausibel, aber fuer den aktuellen Schritt zu gross.
|
||||
|
||||
Fuer die Startseite gilt:
|
||||
|
||||
1. Die bestehende `config/domains.php` bleibt zunaechst die fuehrende Brand-/Domain-Konfiguration.
|
||||
2. `ThemeServiceProvider`, `ThemeHelper`, `web-master` und das bestehende Web-Bundle werden weiterverwendet.
|
||||
3. Kein neues Brand-Model nur fuer die Startseite einfuehren.
|
||||
4. Keine neue Base-Struktur unter `app/Brand` anlegen, solange der aktuelle Config-Ansatz reicht.
|
||||
5. Komponenten werden dort neu gebaut oder ersetzt, wo das Mockup und die Positionierung es erzwingen.
|
||||
6. Bestehende Admin-/Customer-/Publisher-Strukturen bleiben unberuehrt.
|
||||
|
||||
Langfristige Punkte aus dem Konzept bleiben als spaetere Ausbaustufe erhalten:
|
||||
|
||||
- Brand-Resolver mit DB-basierter Konfiguration,
|
||||
- View-Override-Mechanik pro Brand,
|
||||
- Score-/Quality-Tier-Anzeigen,
|
||||
- Cross-Domain-Uebergabe zum Hub,
|
||||
- differenziertere Presseecho-Logik.
|
||||
|
||||
### 3.1 Geklaerte Leitentscheidungen
|
||||
|
||||
Die offenen Fragen aus der ersten Konzeptfassung sind wie folgt entschieden:
|
||||
|
||||
- Region/Land wird nicht aus Legacy-Daten erwartet. Falls entsprechende Daten fehlen, wird die Information nicht angezeigt; die Felder koennen spaeter ergaenzt und dann in Filter/Metadaten aktiviert werden.
|
||||
- Legacy-URLs duerfen nicht zu 404 fuehren. Bestehende Kategorie- und Pressemitteilungs-URLs muessen entweder direkt weiter rendern oder sauber auf neue kanonische Ziele gemappt werden.
|
||||
- Qualitaetsstufen erscheinen auf der Startseite nur selektiv: sichtbar bei hohem Score oder Empfehlung, sonst keine Anzeige.
|
||||
- `/veroeffentlichen` bleibt immer eine lokale Brand-Seite auf der jeweiligen Domain. Von dort fuehrt ein CTA in das zentrale Portal.
|
||||
- Belastbare Zahlen wie Archivgroesse, Gruendungsjahr oder Anzahl aktueller Meldungen duerfen oeffentlich genutzt werden, wenn sie aus Datenbank/Import verifizierbar sind.
|
||||
- Desktop ist die gesetzte Hauptvorlage. Mobile wird direkt parallel mitgeprueft; das mobile Mockup ist optische und funktionale Orientierung, die Inhalte folgen der Desktop-Variante.
|
||||
|
||||
---
|
||||
|
||||
## 4. Zielbild der BusinessPortal24-Startseite
|
||||
|
||||
Die Startseite beantwortet primaer: "Was ist aktuell bei Unternehmen los?"
|
||||
|
||||
Sie ist keine Verkaufsseite fuer Publisher. Der Publisher-CTA ist sichtbar, aber nicht der Hauptinhalt. Die Verkaufs-/Publishing-Argumentation gehoert auf die lokale Brand-Seite `/veroeffentlichen`; erst von dort fuehrt der naechste CTA in das zentrale Portal.
|
||||
|
||||
### Inhaltliche Hauptaufgaben
|
||||
|
||||
- aktuelle Pressemitteilungen schnell sichtbar machen,
|
||||
- DACH-/Deutschland-Aktivitaet zeigen,
|
||||
- Branchenzugang anbieten,
|
||||
- Suche und Filter prominent, aber ruhig integrieren,
|
||||
- Vertrauen ueber gepruefte Qualitaet und Archiv-Stabilitaet aufbauen,
|
||||
- Publisher sauber zur lokalen Landing `/veroeffentlichen` fuehren.
|
||||
|
||||
### Visuelle Richtung aus Mockup
|
||||
|
||||
Die Mockups geben die konkrete Richtung vor:
|
||||
|
||||
- Desktop-Startseite: `Pass B _ _ Deutschland _aktiv.html` und `.png`,
|
||||
- mobile Fassung: `Mobile _ Startseite.html`,
|
||||
- spaetere Anschlussseiten: Detailseite und Branchenseite liegen ebenfalls im Ordner, sind aber nicht Teil dieses ersten Umsetzungsschritts.
|
||||
|
||||
Das Mockup ist als visuelle Zielvorgabe zu verwenden, nicht als HTML-Quelle fuer Copy-Paste. Die exportierten HTML-Dateien enthalten eingebettete Fonts und generierten Code und sollen in saubere Blade-/Tailwind-Komponenten uebersetzt werden.
|
||||
|
||||
---
|
||||
|
||||
## 5. Seitenstruktur Startseite
|
||||
|
||||
Die Startseite wird in klar getrennte Abschnitte zerlegt.
|
||||
|
||||
### 5.1 Header / Top-Navigation
|
||||
|
||||
Ziel:
|
||||
|
||||
- Marke sichtbar,
|
||||
- Hauptnavigation mit Aktualitaetslogik,
|
||||
- Suche erreichbar,
|
||||
- CTA "Veroeffentlichen" vorhanden, aber nicht dominant.
|
||||
|
||||
Inhalte:
|
||||
|
||||
- Logo BusinessPortal24,
|
||||
- Hauptnavigation: `Aktuell`, `Branchen`, `Unternehmen`, `Pressemitteilung veroeffentlichen`,
|
||||
- Suche,
|
||||
- optional Login/Publisher-Link.
|
||||
|
||||
Umsetzung:
|
||||
|
||||
- bestehende `livewire:web.header` pruefen und stark vereinfachen,
|
||||
- bei rein statischem Header besser als Blade-Komponente `x-web.site-header` neu aufbauen,
|
||||
- Livewire/Volt nur fuer mobile Suche oder interaktive Suche verwenden.
|
||||
|
||||
Entscheidung:
|
||||
|
||||
- Header-Grundmarkup als Blade-Komponente.
|
||||
- Suchinteraktion spaeter als Volt-Komponente, wenn echte Suche angebunden wird.
|
||||
|
||||
### 5.2 Hero / Aktuell-Block
|
||||
|
||||
Ziel:
|
||||
|
||||
- sofort klarmachen: aktuelle Unternehmensmeldungen aus Deutschland/DACH,
|
||||
- keine Reichweitenversprechen,
|
||||
- erste Top-Meldung oder aktuelle Meldung prominent zeigen.
|
||||
|
||||
Moegliche Headline:
|
||||
|
||||
> Aktuelle Pressemitteilungen aus der deutschen Wirtschaft
|
||||
|
||||
Subline:
|
||||
|
||||
> Neue Unternehmensmeldungen, Personalien, Produktankündigungen und Wirtschaftsnachrichten aus Mittelstand, Industrie und Dienstleistung.
|
||||
|
||||
Umsetzung:
|
||||
|
||||
- keine reine Marketing-Hero-Section,
|
||||
- eher Editorial-Header mit Datum, Region-/Land-Filter und Top-Meldung,
|
||||
- Top-Meldung aus echten `PressRelease`-Daten laden,
|
||||
- Fallback fuer leere Datenbank nur fuer lokale Entwicklung definieren.
|
||||
|
||||
### 5.3 Region-/Land- und Zeitfilter
|
||||
|
||||
Ziel:
|
||||
|
||||
- BusinessPortal24 folgt der Aktualitaetslogik.
|
||||
- Der Zustand "Deutschland aktiv" aus dem Mockup wird als Startzustand interpretiert.
|
||||
|
||||
Filter:
|
||||
|
||||
- Region: `Deutschland`, `Oesterreich`, `Schweiz`, optional `DACH`,
|
||||
- Zeitraum: `Heute`, `7 Tage`, `30 Tage`,
|
||||
- Branche: optional im Hauptfilter oder als Branchenleiste.
|
||||
|
||||
Umsetzung:
|
||||
|
||||
- bestehende `livewire:web.filter-bar` kann als Ausgangspunkt dienen,
|
||||
- Werte aus hardcodierten Listen spaeter in Kategorien/Region-Config ueberfuehren,
|
||||
- Filterevents muessen mit `press-releases-grid` verbunden werden; aktuell ist die Grid-Komponente mockdatenbasiert.
|
||||
|
||||
### 5.4 Aktuelle Meldungsliste
|
||||
|
||||
Ziel:
|
||||
|
||||
- Hauptinhalt der Startseite.
|
||||
- Timeline-first: neueste Pressemitteilungen stehen im Zentrum.
|
||||
|
||||
Darstellung:
|
||||
|
||||
- Listen-/Card-Hybrid statt Magazin-Kacheln,
|
||||
- klare Metadaten: Firma, Kategorie/Branche, Region, Datum,
|
||||
- kurze Teaser,
|
||||
- optionale Bildvorschau, wenn vorhanden,
|
||||
- Qualitaetslabel nur selektiv anzeigen: bei hohem Score oder ausdruecklicher Empfehlung; sonst keine Anzeige.
|
||||
|
||||
Umsetzung:
|
||||
|
||||
- `livewire:web.press-releases-grid` durch eine datenbasierte Komponente ersetzen oder umbauen,
|
||||
- Query auf `PressRelease` mit `portal in (businessportal24, both)`, Status veroeffentlicht, Sprache `de`, `published_at desc`,
|
||||
- Eager Loading fuer `company`, `category.translations`, erstes Bild,
|
||||
- Pagination serverseitig.
|
||||
|
||||
Wichtig:
|
||||
|
||||
- Keine erfundenen Analyse-/Interview-Typen ausgeben, wenn die Daten nur Pressemitteilungen sind.
|
||||
- Content-Type kann spaeter aus realen Feldern kommen, darf aber zum Start nicht redaktionelle Formate vortaeuschen.
|
||||
|
||||
### 5.5 Branchenzugang
|
||||
|
||||
Ziel:
|
||||
|
||||
- schneller Einstieg in relevante Themen,
|
||||
- Startseite bleibt aktualitaetszentriert, bietet aber Branchenpfade.
|
||||
|
||||
Inhalte:
|
||||
|
||||
- Branchenliste aus aktiven Kategorien,
|
||||
- optional Anzahl aktueller Meldungen je Kategorie,
|
||||
- Link auf Branchenseiten wie `/kategorie/{slug}`.
|
||||
|
||||
Umsetzung:
|
||||
|
||||
- Blade-Komponente `x-web.industry-strip` oder `x-web.category-strip`,
|
||||
- Query ueber `Category` mit aktiven Kategorien fuer `businessportal24` oder `both`,
|
||||
- Uebersetzungen fuer `de` nutzen.
|
||||
|
||||
### 5.6 Vertrauens-/Qualitaetsblock
|
||||
|
||||
Ziel:
|
||||
|
||||
- BusinessPortal24 als geprueftes, dauerhaftes Pressearchiv positionieren,
|
||||
- ohne Fake-Trust und ohne uebertriebene Reichweite.
|
||||
|
||||
Moegliche Inhalte:
|
||||
|
||||
- "Gepruefte Pressemitteilungen",
|
||||
- "Dauerhaft auffindbar",
|
||||
- "Archivierte Unternehmensmeldungen seit vielen Jahren",
|
||||
- "Korrektur statt Loeschung".
|
||||
|
||||
Umsetzung:
|
||||
|
||||
- statische Blade-Komponente,
|
||||
- Zahlen offensiv verwenden, wenn sie aus Datenbank/Import verifizierbar sind,
|
||||
- bei Zahl "~100.000" erst nach Datenabgleich final anzeigen,
|
||||
- "seit 2008" oder vergleichbare Historienhinweise nutzen, wenn sie fuer die jeweilige Domain belegbar sind.
|
||||
|
||||
### 5.7 Publisher-CTA
|
||||
|
||||
Ziel:
|
||||
|
||||
- sichtbarer, aber dezenter Uebergang zur Veroeffentlichung.
|
||||
|
||||
CTA:
|
||||
|
||||
- Primaer: `Pressemitteilung veroeffentlichen`
|
||||
- Ziel immer zuerst: `/veroeffentlichen`
|
||||
- von dort aus: CTA in das zentrale Portal / den Publisher-Bereich
|
||||
|
||||
Umsetzung:
|
||||
|
||||
- nicht als dominanter SaaS-Banner,
|
||||
- als sachlicher Infokasten oder Footer-CTA,
|
||||
- klare Sprache: "Die Einreichung startet auf BusinessPortal24 und wird im zentralen Publisher-Bereich fortgefuehrt."
|
||||
- fuer die Ausarbeitung der Landing den Entwurf `Ver_ffentlichen _ Variante A _aktiv_.html` beruecksichtigen.
|
||||
|
||||
### 5.8 Footer
|
||||
|
||||
Ziel:
|
||||
|
||||
- rechtliche Links,
|
||||
- Betreiberhinweis,
|
||||
- dezenter Markenfamilien-Hinweis,
|
||||
- RSS/Newsletter nur wenn funktional.
|
||||
|
||||
Aktuelle Footer-Crosslinks muessen sprachlich korrigiert werden:
|
||||
|
||||
- Nicht: "Fuer maximale Reichweite?"
|
||||
- Besser: "Weitere Branchen- und Archivzugänge finden Sie bei Presseecho."
|
||||
|
||||
---
|
||||
|
||||
## 6. Komponentenplan
|
||||
|
||||
### 6.1 Blade-Komponenten
|
||||
|
||||
Diese Komponenten sollen statisch oder serverseitig gerendert werden:
|
||||
|
||||
- `x-web.site-header`
|
||||
- `x-web.main-navigation`
|
||||
- `x-web.home-hero`
|
||||
- `x-web.press-release-list-item`
|
||||
- `x-web.category-strip`
|
||||
- `x-web.quality-summary`
|
||||
- `x-web.publisher-cta`
|
||||
- `x-web.site-footer`
|
||||
|
||||
Blade ist hier bevorzugt, weil diese Bausteine keine dauerhafte Livewire-Hydration brauchen.
|
||||
|
||||
### 6.2 Volt-Komponenten
|
||||
|
||||
Volt wird nur dort eingesetzt, wo echter State benoetigt wird:
|
||||
|
||||
- `livewire:web.press-release-feed` fuer Filter, Pagination und spaeter Suche,
|
||||
- `livewire:web.search-box` falls Suchvorschlaege/autocomplete kommen,
|
||||
- optional `livewire:web.region-filter`.
|
||||
|
||||
Die bestehende `press-releases-grid` kann als Arbeitsgrundlage dienen, soll aber von Mockdaten auf echte Daten umgestellt und fachlich umbenannt werden, wenn sie keine Grid-Komponente mehr ist.
|
||||
|
||||
### 6.3 Nicht fuer Sprint 1
|
||||
|
||||
Nicht in die Startseiten-Umsetzung aufnehmen:
|
||||
|
||||
- Score-Berechnung,
|
||||
- Boost-Slots,
|
||||
- Editorial-Pick-Admin-Workflow,
|
||||
- Cross-Domain-Sanctum-Auth,
|
||||
- vollstaendige Suchmaschine,
|
||||
- Presseecho-Override-Architektur,
|
||||
- neue Brand-DB-Tabelle.
|
||||
|
||||
---
|
||||
|
||||
## 7. Daten- und Query-Konzept
|
||||
|
||||
### 7.1 Startseiten-Feed
|
||||
|
||||
Basisquery:
|
||||
|
||||
- nur veroeffentlichte Pressemitteilungen,
|
||||
- Portal `businessportal24` oder `both`,
|
||||
- Sprache `de`,
|
||||
- nach `published_at desc`,
|
||||
- Soft-Deletes ausschliessen.
|
||||
|
||||
Benötigte Relationen:
|
||||
|
||||
- `company`,
|
||||
- `category.translations`,
|
||||
- erstes/primäres Bild aus `images`,
|
||||
- optional Kontakte erst auf Detailseite.
|
||||
|
||||
### 7.2 Kategorien / Branchen
|
||||
|
||||
Basisquery:
|
||||
|
||||
- aktive Kategorien,
|
||||
- Portal `businessportal24` oder `both`,
|
||||
- Parent-Struktur beachten,
|
||||
- deutsche Uebersetzung laden,
|
||||
- Anzahl aktueller Meldungen optional per `withCount`.
|
||||
|
||||
### 7.3 Region / Land
|
||||
|
||||
Region und Land werden nicht verlaesslich aus den Legacy-Daten erwartet. Fuer die erste Startseitenfassung gilt:
|
||||
|
||||
- vorhandene Region-/Landdaten anzeigen, wenn sie sauber vorhanden sind,
|
||||
- fehlende Daten nicht durch geratenen Text ersetzen,
|
||||
- Filter fuer Region/Land erst aktivieren, wenn die Datenquelle klar ist,
|
||||
- spaetere Ergaenzung ueber neue Felder oder normalisierte Zuordnung vorbereiten.
|
||||
|
||||
### 7.4 Fallbacks
|
||||
|
||||
Fuer migrierte Inhalte muessen Komponenten tolerant sein:
|
||||
|
||||
- fehlendes Bild,
|
||||
- fehlende Kategorie,
|
||||
- fehlende Firma,
|
||||
- fehlende Region / fehlendes Land,
|
||||
- altes oder sehr langes Textfeld,
|
||||
- fehlender Teaser,
|
||||
- Legacy-Slugs und Permalink-Stabilitaet.
|
||||
|
||||
Fallbacks duerfen nicht wie Demo-Daten wirken. Besser:
|
||||
|
||||
- Bildbereich weglassen,
|
||||
- Firma als "Unternehmensmeldung" nur wenn kein Firmenname existiert,
|
||||
- Region/Land ausblenden, solange keine sauberen Daten vorhanden sind,
|
||||
- Teaser aus Text sauber kuerzen,
|
||||
- keine Platzhalterbilder von externen Diensten.
|
||||
|
||||
---
|
||||
|
||||
## 8. Routing-Konzept
|
||||
|
||||
Aktueller Stand:
|
||||
|
||||
- `/` waehlt anhand des Hosts `web.businessportal24` oder `web.presseecho`.
|
||||
- `/veroeffentlichen`, `/kategorien`, `/kategorie/{slug}`, `/release/{slug}` sind bereits angelegt.
|
||||
|
||||
Fuer die Startseite:
|
||||
|
||||
- Route `/` bleibt.
|
||||
- View `web.businessportal24` wird zur echten Startseite.
|
||||
- Keine neue Route noetig.
|
||||
|
||||
Fuer spaetere Unterseiten:
|
||||
|
||||
- Detailseite: neue Route darf existieren, aber Legacy-URLs muessen weiter funktionieren.
|
||||
- Branchenseite: neue Route darf existieren, aber Legacy-Kategorie-URLs muessen weiter funktionieren.
|
||||
- Veroeffentlichen-Landing: `/veroeffentlichen`.
|
||||
|
||||
Legacy-Beispiele:
|
||||
|
||||
- `https://www.businessportal24.com/de/category/kultur.html`
|
||||
- `https://www.businessportal24.com/de/die-zehn-stufen-vom-haben-zum-sein-ein-wegweiser-zu-innerer-freiheit-und-echter-erfuellung.html`
|
||||
|
||||
Wichtig:
|
||||
|
||||
- Keine URLs in Komponenten hardcoden, wenn named routes existieren oder sinnvoll ergaenzt werden koennen.
|
||||
- Legacy-Permalinks aus der Migration nicht durch neue Frontend-Pfade brechen.
|
||||
- Kein Legacy-Aufruf darf zu 404 fuehren.
|
||||
- Fuer neue, sauberere URLs kann spaeter eine kanonische Struktur entstehen. Dann ist pro URL-Typ zu entscheiden, ob die alte URL direkt rendert oder per 301 auf die neue kanonische URL weiterleitet.
|
||||
- Kategorie- und Pressemitteilungs-Routing muessen vor Umsetzung der Detail- und Branchenseiten anhand der Legacy-Daten konkret gemappt werden.
|
||||
|
||||
---
|
||||
|
||||
## 9. Styling- und Asset-Konzept
|
||||
|
||||
### 9.1 Bestehende Basis
|
||||
|
||||
Das Web-Frontend nutzt:
|
||||
|
||||
- `resources/css/web/theme-businessportal24.css`,
|
||||
- `resources/css/web/theme-presseecho.css`,
|
||||
- `resources/css/web/shared-styles.css`,
|
||||
- `tailwind.web.config.js`,
|
||||
- `vite.web.config.js`,
|
||||
- Build-Ausgabe `public/build/web`.
|
||||
|
||||
### 9.2 Anpassung fuer die neue Startseite
|
||||
|
||||
Das aktuelle BusinessPortal24-CSS enthaelt noch viel Glow-, Glass- und Gradient-Sprache. Das widerspricht der neuen Positionierung teilweise.
|
||||
|
||||
Neue Richtung:
|
||||
|
||||
- neutrale, helle Flaechen,
|
||||
- Orange/Rot als Akzent,
|
||||
- feine Linien,
|
||||
- typografische Dichte,
|
||||
- wenig Schatten,
|
||||
- keine starken Glows,
|
||||
- kein Glassmorphism als Grundmuster.
|
||||
|
||||
### 9.3 Design Tokens
|
||||
|
||||
Kurzfristig reichen die vorhandenen CSS-Variablen. Ergaenzen oder schaerfen:
|
||||
|
||||
- `--bp-surface`
|
||||
- `--bp-surface-muted`
|
||||
- `--bp-text`
|
||||
- `--bp-text-muted`
|
||||
- `--bp-accent`
|
||||
- `--bp-border`
|
||||
|
||||
Nicht fuer Sprint 1 noetig:
|
||||
|
||||
- kompletter Umbau auf neue `@theme`-Token-Architektur,
|
||||
- Tailwind-v4-Designsystem von Grund auf.
|
||||
|
||||
---
|
||||
|
||||
## 10. Umsetzungsschritte
|
||||
|
||||
### Schritt 1 - Bestandsseite sichern und fachlich bereinigen
|
||||
|
||||
Aufgaben:
|
||||
|
||||
- aktuelle `web.businessportal24` analysieren,
|
||||
- Inhalte entfernen, die der Positionierung widersprechen,
|
||||
- Mockdaten-Inhalte markieren oder ersetzen,
|
||||
- Header-/Footer-Sprache korrigieren.
|
||||
|
||||
Ergebnis:
|
||||
|
||||
- klare, noch nicht finale Startseite ohne falsche Versprechen.
|
||||
|
||||
### Schritt 2 - Layout aus Mockup in Sektionen schneiden
|
||||
|
||||
Aufgaben:
|
||||
|
||||
- Desktop-Mockup in Abschnitte zerlegen,
|
||||
- Mobile-Mockup gegenpruefen,
|
||||
- Abstaende, Typografie, Spalten und Navigationszustaende dokumentieren,
|
||||
- keine generierte HTML-Struktur uebernehmen.
|
||||
|
||||
Ergebnis:
|
||||
|
||||
- Komponentenliste mit Zuordnung zu Blade oder Volt.
|
||||
|
||||
### Schritt 3 - Statische Shell bauen
|
||||
|
||||
Aufgaben:
|
||||
|
||||
- neues Header-/Footer-Markup erstellen,
|
||||
- Hero/Aktuell-Block als Blade-Komponente,
|
||||
- Kategorie-/Branchenleiste als Blade-Komponente,
|
||||
- Publisher-CTA als Blade-Komponente,
|
||||
- CSS auf editorialen BusinessPortal24-Look reduzieren.
|
||||
|
||||
Ergebnis:
|
||||
|
||||
- Startseite sieht im Grundlayout wie das Mockup aus, nutzt aber noch einfache Daten/Fallbacks.
|
||||
|
||||
### Schritt 4 - Pressemitteilungen datenbasiert anbinden
|
||||
|
||||
Aufgaben:
|
||||
|
||||
- Feed-Komponente mit echter `PressRelease`-Query bauen,
|
||||
- Relationen eager loaden,
|
||||
- Pagination integrieren,
|
||||
- leere/alte Daten sauber behandeln,
|
||||
- Kategorie- und Datumsanzeige aus echten Feldern.
|
||||
|
||||
Ergebnis:
|
||||
|
||||
- Startseite zeigt echte migrierte/veroeffentlichte Meldungen.
|
||||
|
||||
### Schritt 5 - Filter aktivieren
|
||||
|
||||
Aufgaben:
|
||||
|
||||
- Zeitraum- und Branchenfilter mit Query verbinden,
|
||||
- Region-/Landfilter erst aktivieren, wenn die Datenquelle sauber vorhanden ist,
|
||||
- URL-State pruefen (`?region=de&zeitraum=7`), damit Links teilbar bleiben,
|
||||
- Mobile-Darstellung aus Mockup umsetzen,
|
||||
- Ladezustand minimal halten.
|
||||
|
||||
Ergebnis:
|
||||
|
||||
- aktive Filterzustaende funktionieren serverseitig nachvollziehbar; fehlende Region-/Landdaten werden nicht angezeigt.
|
||||
|
||||
### Schritt 6 - SEO und Meta-Basis
|
||||
|
||||
Aufgaben:
|
||||
|
||||
- Seitentitel und Description fuer BusinessPortal24 setzen,
|
||||
- Open-Graph-Basisdaten,
|
||||
- canonical URL je Domain,
|
||||
- Legacy-URL-Strategie fuer Kategorie- und Detailseiten beruecksichtigen,
|
||||
- keine noindex-/Demo-Reste,
|
||||
- strukturierte Daten nur, wenn fachlich sauber.
|
||||
|
||||
Ergebnis:
|
||||
|
||||
- Startseite ist SEO-tauglich und teilbar.
|
||||
|
||||
### Schritt 7 - Tests und technische Abnahme
|
||||
|
||||
Aufgaben:
|
||||
|
||||
- Feature-Test fuer Startseite `businessportal24` anlegen/erweitern,
|
||||
- Test fuer sichtbare Kerntexte,
|
||||
- Test fuer veroeffentlichte BusinessPortal24-/Both-Meldungen im Feed,
|
||||
- Test gegen Presseecho-Verwechslung,
|
||||
- responsive Smoke-Check manuell im Browser.
|
||||
|
||||
Ergebnis:
|
||||
|
||||
- Startseite ist gegen Regressionen abgesichert.
|
||||
|
||||
---
|
||||
|
||||
## 11. Akzeptanzkriterien Startseite
|
||||
|
||||
Die Startseite gilt als fertig fuer den naechsten Schritt, wenn:
|
||||
|
||||
- `businessportal24.test/` ohne Fehler rendert,
|
||||
- keine falschen Reichweiten-/Lead-/Exklusivversprechen sichtbar sind,
|
||||
- keine Demo-Placeholders von externen Bilddiensten sichtbar sind,
|
||||
- echte Pressemitteilungen aus der Datenbank angezeigt werden,
|
||||
- Meldungen nach Portal-Kontext gefiltert werden,
|
||||
- fehlende Region-/Landdaten nicht als Platzhalter angezeigt werden,
|
||||
- selektive Qualitaets-/Empfehlungslabels nur bei vorhandenem Score/Flag erscheinen,
|
||||
- Header, Navigation, Feed, Branchenzugang, Publisher-CTA und Footer responsiv funktionieren,
|
||||
- die mobile Ansicht direkt parallel am Mockup `Mobile _ Startseite.html` orientiert ist,
|
||||
- `/veroeffentlichen` lokal auf BusinessPortal24 bleibt und von dort ins Portal fuehrt,
|
||||
- `php artisan test --compact` fuer die betroffenen Tests erfolgreich ist,
|
||||
- `php bin pint --dirty --format agent` nach PHP-Aenderungen gelaufen ist,
|
||||
- `php npm run build:web` oder der relevante Build erfolgreich ist, sobald CSS/JS geaendert wurden.
|
||||
|
||||
---
|
||||
|
||||
## 12. Dokumentationslog waehrend der Umsetzung
|
||||
|
||||
Dieses Dokument soll waehrend der Umsetzung fortgeschrieben werden. Pro abgeschlossenem Schritt:
|
||||
|
||||
- Datum eintragen,
|
||||
- erledigte Dateien nennen,
|
||||
- offene Punkte festhalten,
|
||||
- bewusste Abweichungen vom Mockup begruenden.
|
||||
|
||||
### Log
|
||||
|
||||
| Datum | Schritt | Status | Notiz |
|
||||
| --- | --- | --- | --- |
|
||||
| 12.05.2026 | Konzept erstellt | offen | Startpunkt fuer Umsetzung der BusinessPortal24-Startseite |
|
||||
| 12.05.2026 | Offene Fragen eingearbeitet | erledigt | Region-Fallbacks, Legacy-URLs, lokale Veroeffentlichen-Seite, Qualitaetslabels, Zahlen und Mobile-Vorgehen geklaert |
|
||||
| 12.05.2026 | Mockup `Pass B _ _ Deutschland _aktiv` 1:1 in Blade/Volt-Sektionen ueberfuehrt | erledigt | Neue Komponenten: `site-header` (Top-Bar/Brand/Suche/Navigation/Live-Ticker), `focus-hero` (Hauptmeldung + 'Was sonst zaehlt'), Volt-Feed mit Tabs Alle/Heute/Diese Woche, Sidebar (`most-read`, `publisher-cta`, `active-newsrooms`), `industry-spotlight` (KPI + Liste + Studie), `events-week`, `industry-index`, `newsletter-strip` (dunkel), `quality-summary`, `site-footer`. Echte Daten aus `PressRelease`/`Category`/`Company`. Demo-Inhalte fuer Ticker, Termine, Newsletter-Topics, Studie bleiben statisch und sind als spaetere Datenquelle markiert. Theme-CSS auf editorialen Look (Source Serif 4 / Inter Tight / JetBrains Mono, neutrale Beige-Surface, ruhige Akzentfarbe `#cf3628`) umgestellt. |
|
||||
| 12.05.2026 | Formatierung an `dev/frontend/tailwind_v3/Startseite Tailwind.html` angeglichen | erledigt | Theme-CSS auf vollstaendiges v3-Farbsystem migriert (`bg`/`bg-elev`/`bg-rule`/`bg-rule-strong`/`bg-card-warm`/`bg-card-warm-border`, `ink`/`ink-2..4`/`ink-on-dark*`, `brand`/`brand-deep`/`brand-soft`/`gain`/`loss`, Gradient-Tokens `bg-topbar-grad`/`bg-feature-grad`/`bg-hero-grad`, `max-w-layout: 1280px`, Akzentfarbe nun `#C84A1E`). Site-Header bekam dunkle Top-Bar mit Edition-Tabs (DE/AT/CH/EN), Suchfeld mit Cmd+K-Hinweis und "Erweiterte Suche", Underline-Navigation; neuer `live-ticker` mit Pulse-Dot + DAX-Sparkline. Focus-Hero: 500px-Hero mit `bg-hero-grad`, TOP-MELDUNG- und Audio-Tag, nummerierte Sidebar (01-04) mit 64×64 Bild-Block + Verifiziert-Icon, abgesetzte 4px-Pagination, eigene Anzeigen-Karte. Press-Release-Feed komplett auf flache 60/100/1fr-Liste umgestellt (Featured-Top mit 240×160-Bild, Empfehlung-Stern-Badge, In-Feed-Anzeigen mit `Anzeige`/`Ende Anzeige`-Hairlines auf `bg-card-warm`). Most-Read mit horizontalem Brand-Balkenindikator; Publisher-CTA, Newsletter-Strip und Site-Footer durchgehend auf `bg-topbar-grad` umgestellt; Active-Newsrooms mit Brand-Marken-Initial + Pulse-Badge "heute aktiv". Industry-Spotlight als 3-Spalten-Stat-Grid + Liste + warme Studien-Karte mit Brand-Topborder; Events-Week als zusammenhaengendes 7-Spalten-Grid mit "Heute"-Highlight; Industry-Index als 4×2-Grid mit Gain/Loss-Trend und Balken; Quality-Summary als warm-beige Card mit Schild-Icon. 215 Tests gruen (213 Tests bei 1095 Assertions; einziger Fail ist vorbestehender `api/v1.yml`-Test ohne Bezug zur Startseite). |
|
||||
|
||||
---
|
||||
|
||||
## 13. Entscheidungen und Restklaerungen
|
||||
|
||||
### 13.1 Geklaerte Entscheidungen
|
||||
|
||||
- Region/Land kommt nicht verlaesslich aus den Legacy-Daten. Fehlende Daten werden nicht angezeigt und koennen spaeter durch neue Felder oder Zuordnungen ergaenzt werden.
|
||||
- Die komplette Legacy-URL-Struktur muss sauber migriert werden. Weder Kategorie- noch Detail-URLs duerfen zu 404 fuehren.
|
||||
- Beispiel Kategorie alt: `https://www.businessportal24.com/de/category/kultur.html`
|
||||
- Beispiel Pressemitteilung alt: `https://www.businessportal24.com/de/die-zehn-stufen-vom-haben-zum-sein-ein-wegweiser-zu-innerer-freiheit-und-echter-erfuellung.html`
|
||||
- Neue, sauberere URLs sind zulaessig. Pro URL-Typ muss aber entschieden werden, ob alte URLs direkt rendern oder per 301 auf kanonische neue URLs leiten.
|
||||
- Qualitaetsstufen koennen auf der Startseite sichtbar sein, aber nur selektiv bei hohem Score oder Empfehlung; sonst bleibt die Anzeige leer.
|
||||
- `/veroeffentlichen` bleibt immer lokal auf der jeweiligen Brand-Domain. Von dort fuehrt ein CTA in das zentrale Portal. Der Entwurf `Ver_ffentlichen _ Variante A _aktiv_.html` ist fuer diese Landing zu beruecksichtigen.
|
||||
- Oeffentliche Zahlen wie "100.000", "seit 2008" oder aktuelle Meldungszahlen duerfen genutzt werden, wenn sie belastbar sind und der Positionierung helfen.
|
||||
- Desktop ist die gesetzte Vorlage. Mobile wird parallel geprueft und umgesetzt; das mobile Mockup liefert Optik/Funktion, die Inhalte folgen der Desktop-Variante.
|
||||
|
||||
### 13.2 Noch offen
|
||||
|
||||
- Header langfristig als statische Blade-Komponente oder als Volt-Komponente: vor Umsetzung anhand der tatsaechlichen Such-/Menue-Interaktion entscheiden.
|
||||
- Konkretes Legacy-URL-Mapping fuer Kategorien und Pressemitteilungen anhand der migrierten Daten pruefen.
|
||||
- Kanonische neue URL-Struktur fuer Kategorien und Pressemitteilungen festlegen.
|
||||
|
||||
---
|
||||
|
||||
## 14. Reihenfolge nach der Startseite
|
||||
|
||||
Nach finaler Desktop- und Mobile-Startseite werden die weiteren Mockups in dieser Reihenfolge umgesetzt:
|
||||
|
||||
1. Startseite Desktop auf Basis `Pass B _ _ Deutschland _aktiv` finalisieren.
|
||||
2. Mobile Startseite parallel gegen `Mobile _ Startseite.html` pruefen und responsiv finalisieren.
|
||||
3. Detailseite Pressemitteilung inklusive Legacy-URL-Mapping.
|
||||
4. Branchenseite Energie/Klima als Vorlage fuer alle Kategorien inklusive Legacy-Kategorie-URLs.
|
||||
5. Veroeffentlichen-Landing auf Basis `Ver_ffentlichen _ Variante A _aktiv_.html`.
|
||||
6. Presseecho-Ableitung erst nach stabiler BusinessPortal24-Basis.
|
||||
|
||||
Diese Reihenfolge verhindert, dass gemeinsame Komponenten zu frueh abstrahiert werden. Erst wenn Startseite, Detailseite und Branchenseite konkret sind, ist sichtbar, welche Bausteine wirklich wiederverwendbar sind.
|
||||
512
dev/frontend/Ver_ffentlichen _ Variante A _aktiv_.html
Normal file
512
dev/frontend/Ver_ffentlichen _ Variante A _aktiv_.html
Normal file
File diff suppressed because one or more lines are too long
BIN
dev/frontend/Ver_ffentlichen _ Variante A _aktiv_.png
Normal file
BIN
dev/frontend/Ver_ffentlichen _ Variante A _aktiv_.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
875
dev/frontend/tailwind_v3/Branchenseite Tailwind.html
Normal file
875
dev/frontend/tailwind_v3/Branchenseite Tailwind.html
Normal file
|
|
@ -0,0 +1,875 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>businessportal24 — Branche · Energie & Klima</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
bg:"#F6F4EF","bg-elev":"#FBFAF6","bg-rule":"#E5E0D5","bg-rule-strong":"#1C1A17",
|
||||
"bg-dark":"#14202E","bg-card-warm":"#F1ECE2","bg-card-warm-border":"#D9CDB6",
|
||||
"bg-footer":"#0F1216","bg-strip":"#1A1F26",
|
||||
topbar:"#1A1F26",topbar2:"#232A33",
|
||||
ink:"#1C1A17","ink-2":"#3D3935","ink-3":"#6E6862","ink-4":"#9A958D",
|
||||
"ink-on-dark":"#F6F4EF","ink-on-dark-2":"#B8B3AA",
|
||||
brand:"#C84A1E","brand-deep":"#A23814","brand-soft":"#F4E5DD",
|
||||
live:"#E03A1A",gain:"#2E8540",loss:"#C8341E",ok:"#2E8540",
|
||||
},
|
||||
fontFamily: {
|
||||
sans:['"Inter Tight"','"Söhne"','Inter','system-ui','sans-serif'],
|
||||
serif:['"Source Serif 4"','"Source Serif Pro"','Charter','Georgia','serif'],
|
||||
mono:['"JetBrains Mono"','"SF Mono"','ui-monospace','monospace'],
|
||||
},
|
||||
maxWidth:{ layout:"1280px" },
|
||||
backgroundImage:{
|
||||
"topbar-grad":"linear-gradient(135deg,#1A1F26 0%,#232A33 100%)",
|
||||
"hero-ocean":"linear-gradient(135deg,#14202E 0%,#1A2D44 60%,#2A4566 100%)",
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html,body{margin:0;padding:0;} body{background:#E8E4DA;font-family:"Inter Tight",system-ui,sans-serif;}
|
||||
.eyebrow{font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#C84A1E;}
|
||||
.eyebrow.muted{color:#6E6862;}
|
||||
.bp-cat{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#C84A1E;}
|
||||
.bp-tag{display:inline-flex;align-items:center;padding:3px 8px;font-size:10.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;background:#C84A1E;color:white;}
|
||||
.bp-tag.verified{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);color:white;backdrop-filter:blur(4px);}
|
||||
.rule-strong{height:1px;background:#1C1A17;border:0;margin:0;}
|
||||
.rule{height:1px;background:#E5E0D5;border:0;margin:0;}
|
||||
@keyframes bp-pulse{0%,100%{opacity:1}50%{opacity:.3}} .pulse-dot{animation:bp-pulse 1.6s ease-in-out infinite;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-bg text-ink font-sans antialiased">
|
||||
<div class="mx-auto bg-bg" style="width:1280px;">
|
||||
|
||||
<!-- ============== TOP UTILITY BAR ============== -->
|
||||
<div class="bg-topbar-grad text-ink-on-dark-2 border-b border-black">
|
||||
<div class="max-w-layout mx-auto px-8 flex items-stretch text-[11.5px] tracking-wide">
|
||||
<span class="flex items-center pr-4 py-2 whitespace-nowrap border-r border-[#2A2723]">Mi, 6. Mai 2026</span>
|
||||
<span class="flex items-center px-3.5 text-[9.5px] uppercase font-semibold tracking-[0.16em] text-[#6E6862] whitespace-nowrap">Ausgabe</span>
|
||||
<button class="flex items-center gap-1.5 px-2.5 py-2 text-[11.5px] font-semibold text-ink-on-dark bg-white/[0.06] border-b-2 border-brand -mb-px whitespace-nowrap"><span class="text-[12px] leading-none">🇩🇪</span><span>DE</span></button>
|
||||
<button class="flex items-center gap-1.5 px-2.5 py-2 text-[11.5px] font-medium text-ink-on-dark-2 border-b-2 border-transparent -mb-px whitespace-nowrap"><span class="text-[12px] leading-none">🇦🇹</span><span>AT</span></button>
|
||||
<button class="flex items-center gap-1.5 px-2.5 py-2 text-[11.5px] font-medium text-ink-on-dark-2 border-b-2 border-transparent -mb-px whitespace-nowrap"><span class="text-[12px] leading-none">🇨🇭</span><span>CH</span></button>
|
||||
<button class="flex items-center gap-1.5 px-2.5 py-2 text-[11.5px] font-medium text-ink-on-dark-2 border-b-2 border-transparent -mb-px whitespace-nowrap"><span class="text-[12px] leading-none">🌐</span><span>EN</span></button>
|
||||
<span class="flex-1"></span>
|
||||
<span class="flex items-center gap-4 py-2 whitespace-nowrap">
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" class="opacity-60"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1"/><path d="M1 6h10M6 1c2 1.5 2 8.5 0 10M6 1c-2 1.5-2 8.5 0 10" stroke="currentColor" stroke-width="1" fill="none"/></svg>
|
||||
<strong class="text-ink-on-dark font-semibold">Deutsch</strong>
|
||||
</span>
|
||||
<span class="w-px h-[14px] bg-[#2A2723]"></span>
|
||||
<a href="#" class="hover:text-ink-on-dark">Newsletter</a>
|
||||
<a href="#" class="hover:text-ink-on-dark">RSS</a>
|
||||
<a href="#" class="hover:text-ink-on-dark">API</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============== HEADER ============== -->
|
||||
<header class="bg-bg border-b border-bg-rule">
|
||||
<div class="max-w-layout mx-auto px-8 py-[18px] grid items-center gap-6" style="grid-template-columns:auto 1fr auto auto;">
|
||||
<div>
|
||||
<div class="font-serif text-[28px] font-semibold leading-none tracking-[-0.5px]">businessportal<span class="text-brand">24</span></div>
|
||||
<div class="eyebrow muted mt-1 text-[9.5px] tracking-[0.18em]">Pressemitteilungen · DACH</div>
|
||||
</div>
|
||||
<div class="w-full max-w-[540px]">
|
||||
<div class="flex items-center gap-2.5 px-3.5 py-2.5 border border-bg-rule bg-bg-elev text-[13px] text-ink-3">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5" stroke="currentColor" stroke-width="1.5"/><path d="M11 11l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
<span class="flex-1">Suche in „Energie & Klima" — Unternehmen, ISIN, Standort…</span>
|
||||
<span class="text-[10.5px] text-ink-4 border border-bg-rule px-1.5 py-0.5 font-mono">⌘K</span>
|
||||
</div>
|
||||
<div class="flex justify-between mt-1.5 text-[11px] text-ink-3">
|
||||
<span>Schnellfilter: <a class="text-brand font-semibold">Verifiziert</a> · <a class="text-brand font-semibold">Mit ISIN</a> · <a class="text-brand font-semibold">Letzte 24 h</a></span>
|
||||
<a class="text-brand font-semibold">Erweiterte Suche →</a>
|
||||
</div>
|
||||
</div>
|
||||
<button class="px-4 py-2.5 text-[13px] font-semibold text-ink">Anmelden</button>
|
||||
<button class="inline-flex items-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold text-white bg-brand hover:bg-brand-deep transition-colors">
|
||||
Veröffentlichen
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 6h6M6 3l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ============== MAIN NAV ============== -->
|
||||
<nav class="bg-bg border-b border-bg-rule">
|
||||
<div class="max-w-layout mx-auto px-8 flex items-stretch">
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Startseite</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Wirtschaft</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Technologie</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Finanzen</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Industrie</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-semibold text-ink border-b-2 border-brand -mb-px">Energie</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Gesundheit</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Handel</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Immobilien</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Mobilität</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Alle Rubriken</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ============== BRANCHEN-SCHLAGZEILEN STRIP ============== -->
|
||||
<div class="bg-strip text-ink-on-dark" style="background:#1A1F26;">
|
||||
<div class="max-w-layout mx-auto px-8 py-2.5 grid items-center gap-5 text-[12.5px]" style="grid-template-columns:auto 1fr auto;">
|
||||
<span class="inline-flex items-center gap-2 text-ink-on-dark-2 font-semibold text-[10px] tracking-[0.18em] uppercase font-mono">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="none" class="opacity-70"><path d="M1 3h10M1 6h10M1 9h6" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
Top-Schlagzeilen · Energie
|
||||
</span>
|
||||
<div class="flex gap-6 overflow-hidden whitespace-nowrap">
|
||||
<span class="inline-flex gap-2 items-baseline"><span class="font-mono text-[11px] text-[#8A847B]">14:32</span><span class="text-ink-on-dark">Siemens Energy hebt Jahresprognose an — Auftragsbestand Rekord</span></span>
|
||||
<span class="inline-flex gap-2 items-baseline"><span class="font-mono text-[11px] text-[#8A847B]">13:55</span><span class="text-ink-on-dark">Fluence eröffnet Gigafactory Halle (Saale)</span></span>
|
||||
<span class="inline-flex gap-2 items-baseline"><span class="font-mono text-[11px] text-[#8A847B]">12:47</span><span class="text-ink-on-dark">TenneT vergibt 2,3-Mrd-Auftrag SuedLink</span></span>
|
||||
</div>
|
||||
<a class="inline-flex items-center gap-1.5 text-ink-on-dark-2 text-[11.5px]">
|
||||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none"><rect x="2" y="2" width="8" height="8" stroke="currentColor" stroke-width="1" fill="none"/><path d="M4 5.5h4M4 7.5h2.5" stroke="currentColor" stroke-width="1"/></svg>
|
||||
RSS für diese Branche
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============== BREADCRUMB ============== -->
|
||||
<div class="bg-bg border-b border-bg-rule">
|
||||
<div class="max-w-layout mx-auto px-8 py-2.5 flex items-center gap-2 text-[11.5px] text-ink-3">
|
||||
<a href="#" class="hover:text-ink">Startseite</a>
|
||||
<svg width="8" height="8" viewBox="0 0 8 8" class="opacity-60"><path d="M2.5 1.5l3 2.5-3 2.5" stroke="currentColor" stroke-width="1.3" fill="none"/></svg>
|
||||
<a href="#" class="hover:text-ink">Branchen</a>
|
||||
<svg width="8" height="8" viewBox="0 0 8 8" class="opacity-60"><path d="M2.5 1.5l3 2.5-3 2.5" stroke="currentColor" stroke-width="1.3" fill="none"/></svg>
|
||||
<span class="text-ink font-semibold">Energie & Klima</span>
|
||||
<span class="flex-1"></span>
|
||||
<span class="font-mono text-ink-4">/branche/energie-klima</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="max-w-layout mx-auto px-8 pt-9 pb-12">
|
||||
|
||||
<!-- ============== MASTHEAD ============== -->
|
||||
<section>
|
||||
<div class="grid gap-12 items-end mb-[18px]" style="grid-template-columns:1.5fr 1fr;">
|
||||
<div>
|
||||
<div class="eyebrow mb-3">Branche</div>
|
||||
<h1 class="font-serif text-[56px] font-semibold m-0 mb-4 leading-[1.02]" style="letter-spacing:-1.2px;">Energie & Klima</h1>
|
||||
<p class="font-serif text-[16px] leading-[1.55] m-0 mb-[18px] max-w-[620px] text-ink-2">
|
||||
Aktuelle Pressemitteilungen, Studien und Termine aus der Energiewirtschaft, der Wasserstoff-Industrie, dem Klima- und Netzsektor. Redaktionell geprüft, mit Investitionsvolumen, Standorten und ISIN-Bezug.
|
||||
</p>
|
||||
<div class="text-[11.5px] text-ink-3 flex items-center gap-2.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-brand pulse-dot"></span>
|
||||
1 482 Meldungen in den letzten 30 Tagen · 47 heute · Aktualisiert 14:38 Uhr
|
||||
</div>
|
||||
</div>
|
||||
<aside class="flex flex-col gap-2.5">
|
||||
<button class="w-full px-4 py-3 inline-flex items-center justify-center gap-2 text-[13px] font-semibold text-white bg-brand hover:bg-brand-deep transition-colors">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3v8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
Branche folgen
|
||||
</button>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<button class="inline-flex items-center justify-center gap-1.5 px-3 py-2.5 text-[12px] font-semibold border border-bg-rule-strong bg-white">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M1.5 3.5l4.5 3 4.5-3M1.5 3.5v6h9v-6M1.5 3.5L6 .5l4.5 3" stroke="currentColor" stroke-width="1" fill="none"/></svg>
|
||||
E-Mail-Alert
|
||||
</button>
|
||||
<button class="inline-flex items-center justify-center gap-1.5 px-3 py-2.5 text-[12px] font-semibold border border-bg-rule-strong bg-white">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="2.5" cy="9.5" r="1.2" fill="currentColor"/><path d="M2 2c4.5 0 8 3.5 8 8M2 5c2.8 0 5 2.2 5 5" stroke="currentColor" stroke-width="1.2" fill="none"/></svg>
|
||||
RSS-Feed
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-1.5 pt-3.5 border-t border-bg-rule flex justify-between items-baseline text-[11px] text-ink-3">
|
||||
<div>
|
||||
<div class="eyebrow muted text-[9px] mb-1">Redaktions-Ansprech</div>
|
||||
<span class="text-[12px] text-ink-2"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6f646f786d636f4a687a383e246e6f">[email protected]</a></span>
|
||||
</div>
|
||||
<span class="inline-flex items-center gap-1 text-[10.5px] text-ink-3 font-mono cursor-help" style="border-bottom:1px dotted #9A958D;" title="NACE C-35 · D · E">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1"/><path d="M6 5.5v3M6 3.5v.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||||
NACE-Code
|
||||
</span>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
<hr class="rule-strong" />
|
||||
</section>
|
||||
|
||||
<!-- ============== TOPIC CHIPS ============== -->
|
||||
<div class="mt-6 mb-6 flex flex-wrap items-center gap-2">
|
||||
<span class="eyebrow muted text-[10px] mr-1.5">Sub-Themen</span>
|
||||
<button class="inline-flex items-baseline gap-[7px] px-3.5 py-2 text-[12.5px] font-semibold bg-ink text-bg border border-ink">Alle <span class="font-mono text-[10.5px] text-white/65 font-medium">1.482</span></button>
|
||||
<button class="inline-flex items-baseline gap-[7px] px-3.5 py-2 text-[12.5px] font-medium border border-bg-rule-strong text-ink">Erneuerbare <span class="font-mono text-[10.5px] text-ink-3 font-medium">412</span></button>
|
||||
<button class="inline-flex items-baseline gap-[7px] px-3.5 py-2 text-[12.5px] font-medium border border-bg-rule-strong text-ink">Wasserstoff <span class="font-mono text-[10.5px] text-ink-3 font-medium">184</span></button>
|
||||
<button class="inline-flex items-baseline gap-[7px] px-3.5 py-2 text-[12.5px] font-medium border border-bg-rule-strong text-ink">Netze <span class="font-mono text-[10.5px] text-ink-3 font-medium">156</span></button>
|
||||
<button class="inline-flex items-baseline gap-[7px] px-3.5 py-2 text-[12.5px] font-medium border border-bg-rule-strong text-ink">Speicher <span class="font-mono text-[10.5px] text-ink-3 font-medium">98</span></button>
|
||||
<button class="inline-flex items-baseline gap-[7px] px-3.5 py-2 text-[12.5px] font-medium border border-bg-rule-strong text-ink">Klimapolitik <span class="font-mono text-[10.5px] text-ink-3 font-medium">174</span></button>
|
||||
<button class="inline-flex items-baseline gap-[7px] px-3.5 py-2 text-[12.5px] font-medium border border-bg-rule-strong text-ink">Wärme & Gebäude <span class="font-mono text-[10.5px] text-ink-3 font-medium">121</span></button>
|
||||
<button class="inline-flex items-baseline gap-[7px] px-3.5 py-2 text-[12.5px] font-medium border border-bg-rule-strong text-ink">Atomkraft <span class="font-mono text-[10.5px] text-ink-3 font-medium">47</span></button>
|
||||
<button class="inline-flex items-baseline gap-[7px] px-3.5 py-2 text-[12.5px] font-medium border border-bg-rule-strong text-ink">Öl & Gas <span class="font-mono text-[10.5px] text-ink-3 font-medium">92</span></button>
|
||||
<button class="inline-flex items-baseline gap-[7px] px-3.5 py-2 text-[12.5px] font-medium border border-bg-rule-strong text-ink">E-Mobilität & Laden <span class="font-mono text-[10.5px] text-ink-3 font-medium">198</span></button>
|
||||
</div>
|
||||
|
||||
<!-- ============== STAT STRIP ============== -->
|
||||
<div class="grid grid-cols-4 border-y border-bg-rule mb-8">
|
||||
<div class="px-6 py-5 border-r border-bg-rule">
|
||||
<div class="eyebrow muted text-[10px] mb-2.5">Meldungen heute</div>
|
||||
<div class="font-serif text-[36px] font-semibold leading-none" style="letter-spacing:-0.6px;">47</div>
|
||||
<div class="flex items-center gap-1.5 mt-2 text-[11.5px]">
|
||||
<span class="inline-flex items-center text-gain font-semibold"><svg width="9" height="9" viewBox="0 0 9 9"><path d="M4.5 1.5l3 3.5h-2v3h-2v-3h-2z" fill="currentColor"/></svg></span>
|
||||
<span class="text-ink-3">+18 ggü. Wochenschnitt</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6 py-5 border-r border-bg-rule">
|
||||
<div class="eyebrow muted text-[10px] mb-2.5">Letzte 7 Tage</div>
|
||||
<div class="font-serif text-[36px] font-semibold leading-none" style="letter-spacing:-0.6px;">284</div>
|
||||
<div class="flex items-center gap-1.5 mt-2 text-[11.5px]">
|
||||
<span class="inline-flex items-center text-gain font-semibold"><svg width="9" height="9" viewBox="0 0 9 9"><path d="M4.5 1.5l3 3.5h-2v3h-2v-3h-2z" fill="currentColor"/></svg></span>
|
||||
<span class="text-ink-3">+12 % ggü. Vorwoche</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6 py-5 border-r border-bg-rule">
|
||||
<div class="eyebrow muted text-[10px] mb-2.5">Aktive Unternehmen</div>
|
||||
<div class="font-serif text-[36px] font-semibold leading-none" style="letter-spacing:-0.6px;">112</div>
|
||||
<div class="flex items-center gap-1.5 mt-2 text-[11.5px]">
|
||||
<span class="inline-flex items-center text-gain font-semibold"><svg width="9" height="9" viewBox="0 0 9 9"><path d="M4.5 1.5l3 3.5h-2v3h-2v-3h-2z" fill="currentColor"/></svg></span>
|
||||
<span class="text-ink-3">+9 neu in dieser Woche</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6 py-5">
|
||||
<div class="eyebrow muted text-[10px] mb-2.5">Branchen-Reichweite</div>
|
||||
<div class="font-serif text-[36px] font-semibold leading-none" style="letter-spacing:-0.6px;">4,2 Mio.</div>
|
||||
<div class="flex items-center gap-1.5 mt-2 text-[11.5px]">
|
||||
<span class="inline-flex items-center text-gain font-semibold"><svg width="9" height="9" viewBox="0 0 9 9"><path d="M4.5 1.5l3 3.5h-2v3h-2v-3h-2z" fill="currentColor"/></svg></span>
|
||||
<span class="text-ink-3">Leser-Impressionen / 30 Tage</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============== TOP-MELDUNG + 2 BEGLEITER ============== -->
|
||||
<section>
|
||||
<div class="grid gap-9" style="grid-template-columns:1.7fr 1fr;">
|
||||
<article>
|
||||
<div>
|
||||
<div class="relative overflow-hidden bg-hero-ocean" style="height:440px;">
|
||||
<svg width="100%" height="100%" viewBox="0 0 800 440" preserveAspectRatio="xMidYMid slice" class="absolute inset-0">
|
||||
<defs>
|
||||
<linearGradient id="bp-sky" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#7BA0C4" stop-opacity="0.25" />
|
||||
<stop offset="100%" stop-color="#0E1825" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="800" height="440" fill="url(#bp-sky)" />
|
||||
<path d="M 0 320 L 800 290" stroke="#3D5878" stroke-width="1" opacity="0.6" />
|
||||
<circle cx="640" cy="180" r="48" fill="#C84A1E" opacity="0.7" />
|
||||
<circle cx="640" cy="180" r="72" fill="#C84A1E" opacity="0.18" />
|
||||
<g transform="translate(80 200)" opacity="0.55"><line x1="0" y1="0" x2="0" y2="140" stroke="#B8D2E6" stroke-width="2"/><circle cx="0" cy="0" r="4" fill="#E2EEF6"/><line x1="0" y1="0" x2="36" y2="-22" stroke="#E2EEF6" stroke-width="2.5"/><line x1="0" y1="0" x2="-18" y2="32" stroke="#E2EEF6" stroke-width="2.5"/><line x1="0" y1="0" x2="-18" y2="-30" stroke="#E2EEF6" stroke-width="2.5"/></g>
|
||||
<g transform="translate(180 230) scale(0.85)" opacity="0.61"><line x1="0" y1="0" x2="0" y2="140" stroke="#B8D2E6" stroke-width="2"/><circle cx="0" cy="0" r="4" fill="#E2EEF6"/><line x1="0" y1="0" x2="36" y2="-22" stroke="#E2EEF6" stroke-width="2.5"/><line x1="0" y1="0" x2="-18" y2="32" stroke="#E2EEF6" stroke-width="2.5"/><line x1="0" y1="0" x2="-18" y2="-30" stroke="#E2EEF6" stroke-width="2.5"/></g>
|
||||
<g transform="translate(290 215) scale(0.95)" opacity="0.67"><line x1="0" y1="0" x2="0" y2="140" stroke="#B8D2E6" stroke-width="2"/><circle cx="0" cy="0" r="4" fill="#E2EEF6"/><line x1="0" y1="0" x2="36" y2="-22" stroke="#E2EEF6" stroke-width="2.5"/><line x1="0" y1="0" x2="-18" y2="32" stroke="#E2EEF6" stroke-width="2.5"/><line x1="0" y1="0" x2="-18" y2="-30" stroke="#E2EEF6" stroke-width="2.5"/></g>
|
||||
<g transform="translate(410 240) scale(0.8)" opacity="0.73"><line x1="0" y1="0" x2="0" y2="140" stroke="#B8D2E6" stroke-width="2"/><circle cx="0" cy="0" r="4" fill="#E2EEF6"/><line x1="0" y1="0" x2="36" y2="-22" stroke="#E2EEF6" stroke-width="2.5"/><line x1="0" y1="0" x2="-18" y2="32" stroke="#E2EEF6" stroke-width="2.5"/><line x1="0" y1="0" x2="-18" y2="-30" stroke="#E2EEF6" stroke-width="2.5"/></g>
|
||||
<g transform="translate(510 220) scale(0.9)" opacity="0.79"><line x1="0" y1="0" x2="0" y2="140" stroke="#B8D2E6" stroke-width="2"/><circle cx="0" cy="0" r="4" fill="#E2EEF6"/><line x1="0" y1="0" x2="36" y2="-22" stroke="#E2EEF6" stroke-width="2.5"/><line x1="0" y1="0" x2="-18" y2="32" stroke="#E2EEF6" stroke-width="2.5"/><line x1="0" y1="0" x2="-18" y2="-30" stroke="#E2EEF6" stroke-width="2.5"/></g>
|
||||
<g transform="translate(710 250) scale(0.75)" opacity="0.85"><line x1="0" y1="0" x2="0" y2="140" stroke="#B8D2E6" stroke-width="2"/><circle cx="0" cy="0" r="4" fill="#E2EEF6"/><line x1="0" y1="0" x2="36" y2="-22" stroke="#E2EEF6" stroke-width="2.5"/><line x1="0" y1="0" x2="-18" y2="32" stroke="#E2EEF6" stroke-width="2.5"/><line x1="0" y1="0" x2="-18" y2="-30" stroke="#E2EEF6" stroke-width="2.5"/></g>
|
||||
<rect x="0" y="320" width="800" height="120" fill="#0A121C" opacity="0.5"/>
|
||||
<path d="M0 380 H800 M0 400 H800 M0 420 H800" stroke="#1F3A56" stroke-width="1" opacity="0.4"/>
|
||||
</svg>
|
||||
<div class="absolute top-5 left-5 flex gap-2">
|
||||
<span class="bp-tag">Top-Meldung</span>
|
||||
<span class="bp-tag verified">✓ Verifiziert</span>
|
||||
</div>
|
||||
<div class="absolute left-0 right-0 bottom-0 px-9 pb-8 pt-[70px] text-white" style="background:linear-gradient(180deg,transparent,rgba(0,0,0,0.92));">
|
||||
<div class="eyebrow mb-3" style="color:#FF8B6F;">Wasserstoff · Offshore</div>
|
||||
<h1 class="font-serif text-[34px] font-semibold m-0 leading-[1.12] tracking-[-0.6px] max-w-[680px]">
|
||||
RWE startet 1,8-GW-Offshore-Windpark vor Helgoland — größtes Nordsee-Projekt 2025 geht in die Bauphase
|
||||
</h1>
|
||||
<p class="font-serif text-[14.5px] leading-[1.5] mt-3.5 max-w-[600px] text-white/85">
|
||||
Mit einem Investitionsvolumen von 4,1 Milliarden Euro entsteht in der deutschen Bucht der bislang größte zusammenhängende Offshore-Komplex des Konzerns. Die Inbetriebnahme der ersten 600 MW ist für Q4 2027 vorgesehen; eine Hybrid-Anbindung an den geplanten Wasserstoff-Cluster Wilhelmshaven ist Teil des Konzeptes.
|
||||
</p>
|
||||
<div class="mt-[18px] flex items-center gap-3.5 text-[12px] text-white/70 flex-wrap">
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<svg width="11" height="11" viewBox="0 0 11 11" style="color:#5BC07A;"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg>
|
||||
RWE AG
|
||||
</span>
|
||||
<span>· Essen</span><span>·</span><span class="font-mono">17.10.2026 · 09:30</span>
|
||||
<span>·</span><span>5 Min. Lesezeit</span>
|
||||
<span>·</span><span class="font-mono">Volumen 4,1 Mrd. €</span>
|
||||
<span>·</span><span class="font-mono text-white/85">ISIN DE0007037129</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption class="flex items-baseline justify-between gap-4 pt-2.5 pb-2.5 text-[11.5px] text-ink-3 border-b border-bg-rule">
|
||||
<span><strong class="text-ink-2 font-semibold">Pressefoto:</strong> Offshore-Windpark Nordsee, RWE AG — bezieht sich auf die nebenstehende Top-Meldung</span>
|
||||
<span class="font-mono text-ink-4 whitespace-nowrap">© RWE AG / Pressebild</span>
|
||||
</figcaption>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<aside>
|
||||
<div class="eyebrow muted mb-3.5">Weitere Top-Meldungen heute</div>
|
||||
|
||||
<article class="py-[18px] border-t border-bg-rule-strong border-b border-bg-rule">
|
||||
<div class="flex justify-between items-baseline mb-2">
|
||||
<span class="bp-cat">Wasserstoff</span>
|
||||
<span class="font-mono text-[11px] text-ink-3">12:28</span>
|
||||
</div>
|
||||
<h3 class="font-serif text-[17px] leading-[1.28] m-0 font-semibold tracking-[-0.2px]">EnBW unterzeichnet Wasserstoff-Lieferabkommen mit Air Liquide — 120 000 t pro Jahr ab 2028</h3>
|
||||
<div class="mt-2.5 text-[11.5px] text-ink-3 flex items-center gap-2">
|
||||
<svg width="11" height="11" viewBox="0 0 11 11" class="text-ok"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg>
|
||||
<span>EnBW Energie Baden-Württemberg AG</span>
|
||||
<span class="text-ink-4">·</span>
|
||||
<span class="text-[9.5px] font-bold tracking-[0.1em] uppercase text-brand border border-brand/25 px-1.5 py-px font-mono" style="background:rgba(204,55,51,0.04);">Verifiziert</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="py-[18px] border-b border-bg-rule">
|
||||
<div class="flex justify-between items-baseline mb-2">
|
||||
<span class="bp-cat">Klimapolitik</span>
|
||||
<span class="font-mono text-[11px] text-ink-3">10:55</span>
|
||||
</div>
|
||||
<h3 class="font-serif text-[17px] leading-[1.28] m-0 font-semibold tracking-[-0.2px]">Stadtwerke München erreichen 100-%-Ökostrom-Ziel für alle Privatkunden — drei Jahre vor Plan</h3>
|
||||
<div class="mt-2.5 text-[11.5px] text-ink-3 flex items-center gap-2">
|
||||
<svg width="11" height="11" viewBox="0 0 11 11" class="text-ok"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg>
|
||||
<span>SWM Versorgungs GmbH</span>
|
||||
<span class="text-ink-4">·</span>
|
||||
<span class="text-[9.5px] font-bold tracking-[0.1em] uppercase text-brand border border-brand/25 px-1.5 py-px font-mono" style="background:rgba(204,55,51,0.04);">Redaktion</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Pressekontakt Top-Meldung -->
|
||||
<div class="mt-[22px] px-[22px] py-5" style="background:#F1ECE2;border-top:3px solid #C84A1E;">
|
||||
<div class="eyebrow mb-2.5">Pressekontakt · Top-Meldung</div>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="w-[42px] h-[42px] rounded-full text-white inline-flex items-center justify-center text-[14px] font-semibold font-serif" style="background:linear-gradient(135deg,#1A2D44,#2A4566);">SK</div>
|
||||
<div>
|
||||
<div class="font-serif text-[15px] font-semibold leading-[1.2]">Stephanie Klein</div>
|
||||
<div class="text-[11.5px] text-ink-3 mt-0.5">Leitung Konzernkommunikation · RWE AG</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[12px] text-ink-2 leading-[1.55] mb-3">
|
||||
<div><span class="font-mono text-ink-3">Tel.</span> +49 201 5179-5111</div>
|
||||
<div><span class="font-mono text-ink-3">Mail</span> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cebebcabbdbdab8ebcb9abe0ada1a3">[email protected]</a></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<button class="px-2.5 py-2 text-[12px] font-semibold border border-ink text-ink bg-white">Pressemappe</button>
|
||||
<button class="px-2.5 py-2 text-[12px] font-semibold bg-brand hover:bg-brand-deep text-white">Anfrage senden</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============== AKTUELLE MELDUNGEN ============== -->
|
||||
<section class="mt-16 grid gap-9" style="grid-template-columns:1.7fr 1fr;">
|
||||
<div>
|
||||
<header class="flex items-baseline justify-between mb-4 min-h-[34px]">
|
||||
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px]">
|
||||
Aktuelle Meldungen <span class="text-[14px] text-ink-3 font-normal ml-1.5">· Energie & Klima</span>
|
||||
</h2>
|
||||
<div class="flex gap-[18px] text-[12.5px] text-ink-3">
|
||||
<a class="text-ink border-b-[1.5px] border-brand pb-0.5 cursor-pointer">Alle</a>
|
||||
<a class="cursor-pointer">Heute</a>
|
||||
<a class="cursor-pointer">Diese Woche</a>
|
||||
<a class="cursor-pointer">Diesen Monat</a>
|
||||
</div>
|
||||
</header>
|
||||
<hr class="rule-strong" />
|
||||
|
||||
<!-- FEED ROWS -->
|
||||
<a class="grid items-baseline py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 120px 1fr auto; gap:16px;">
|
||||
<span class="font-mono text-[12px] text-ink-3">14:32</span>
|
||||
<span class="bp-cat text-[10.5px]">Erneuerbare</span>
|
||||
<div>
|
||||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium flex items-baseline gap-2 flex-wrap">
|
||||
<span>Siemens Energy hebt Jahresprognose an — Auftragsbestand Gas Services auf Rekordhoch</span>
|
||||
<span class="inline-flex items-center gap-1 text-[9.5px] font-bold tracking-[0.1em] uppercase text-brand font-mono border border-brand/30 px-1.5 py-px" style="background:rgba(204,55,51,0.04);">
|
||||
<svg width="9" height="9" viewBox="0 0 12 12"><path d="M6 1l1.5 3.2 3.5.4-2.6 2.4.7 3.5L6 8.8l-3.1 1.7.7-3.5L1 4.6l3.5-.4z" fill="currentColor"/></svg>Empfehlung
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-[11px] text-ink-3 mt-1 flex items-center gap-1.5"><svg width="9" height="9" viewBox="0 0 11 11" class="text-ok"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg><span>Siemens Energy AG · München</span></div>
|
||||
</div>
|
||||
<span class="font-mono text-[10.5px] text-ink-3 bg-bg-elev px-1.5 py-0.5 border border-bg-rule whitespace-nowrap">ISIN</span>
|
||||
</a>
|
||||
|
||||
<a class="grid items-baseline py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 120px 1fr auto; gap:16px;">
|
||||
<span class="font-mono text-[12px] text-ink-3">14:18</span>
|
||||
<span class="bp-cat text-[10.5px]">Klimapolitik</span>
|
||||
<div>
|
||||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium flex items-baseline gap-2 flex-wrap">
|
||||
<span>BMWK kündigt 12-Mrd-Programm zur Industrie-Dekarbonisierung an — erste Tranche 4,8 Mrd. ab Q3 2026</span>
|
||||
<span class="inline-flex items-center gap-1 text-[9.5px] font-bold tracking-[0.1em] uppercase text-brand font-mono border border-brand/30 px-1.5 py-px" style="background:rgba(204,55,51,0.04);">
|
||||
<svg width="9" height="9" viewBox="0 0 12 12"><path d="M6 1l1.5 3.2 3.5.4-2.6 2.4.7 3.5L6 8.8l-3.1 1.7.7-3.5L1 4.6l3.5-.4z" fill="currentColor"/></svg>Empfehlung
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-[11px] text-ink-3 mt-1 flex items-center gap-1.5"><svg width="9" height="9" viewBox="0 0 11 11" class="text-ok"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg><span>Bundesministerium für Wirtschaft und Klimaschutz · Berlin</span></div>
|
||||
</div>
|
||||
<span></span>
|
||||
</a>
|
||||
|
||||
<a class="grid items-baseline py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 120px 1fr auto; gap:16px;">
|
||||
<span class="font-mono text-[12px] text-ink-3">13:55</span>
|
||||
<span class="bp-cat text-[10.5px]">Speicher</span>
|
||||
<div>
|
||||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium">Fluence eröffnet europäische Gigafactory für Batteriespeicher in Halle (Saale) — 380 neue Stellen</div>
|
||||
<div class="text-[11px] text-ink-3 mt-1 flex items-center gap-1.5"><svg width="9" height="9" viewBox="0 0 11 11" class="text-ok"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg><span>Fluence Energy GmbH · Halle (Saale)</span></div>
|
||||
</div>
|
||||
<span></span>
|
||||
</a>
|
||||
|
||||
<a class="grid items-baseline py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 120px 1fr auto; gap:16px;">
|
||||
<span class="font-mono text-[12px] text-ink-3">13:14</span>
|
||||
<span class="bp-cat text-[10.5px]">Erneuerbare</span>
|
||||
<div>
|
||||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium">Verbund AG bestätigt 4-Mrd-Investitionsplan für österreichischen Wasserkraft-Ausbau bis 2030</div>
|
||||
<div class="text-[11px] text-ink-3 mt-1 flex items-center gap-1.5"><svg width="9" height="9" viewBox="0 0 11 11" class="text-ok"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg><span>Verbund AG · Wien</span></div>
|
||||
</div>
|
||||
<span></span>
|
||||
</a>
|
||||
|
||||
<a class="grid items-baseline py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 120px 1fr auto; gap:16px;">
|
||||
<span class="font-mono text-[12px] text-ink-3">12:47</span>
|
||||
<span class="bp-cat text-[10.5px]">Netze</span>
|
||||
<div>
|
||||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium">TenneT vergibt 2,3-Mrd-Auftrag für HGÜ-Korridor SuedLink an Konsortium Siemens Energy / Hitachi</div>
|
||||
<div class="text-[11px] text-ink-3 mt-1 flex items-center gap-1.5"><svg width="9" height="9" viewBox="0 0 11 11" class="text-ok"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg><span>TenneT TSO GmbH · Bayreuth</span></div>
|
||||
</div>
|
||||
<span></span>
|
||||
</a>
|
||||
|
||||
<a class="grid items-baseline py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 120px 1fr auto; gap:16px;">
|
||||
<span class="font-mono text-[12px] text-ink-3">11:50</span>
|
||||
<span class="bp-cat text-[10.5px]">Wärme & Gebäude</span>
|
||||
<div>
|
||||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium">Vaillant kündigt 700-Mio-Investition in europäische Wärmepumpen-Produktion an — Erweiterung Remscheid</div>
|
||||
<div class="text-[11px] text-ink-3 mt-1 flex items-center gap-1.5"><svg width="9" height="9" viewBox="0 0 11 11" class="text-ok"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg><span>Vaillant Group · Remscheid</span></div>
|
||||
</div>
|
||||
<span></span>
|
||||
</a>
|
||||
|
||||
<a class="grid items-baseline py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 120px 1fr auto; gap:16px;">
|
||||
<span class="font-mono text-[12px] text-ink-3">11:20</span>
|
||||
<span class="bp-cat text-[10.5px]">E-Mobilität</span>
|
||||
<div>
|
||||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium">Ionity erweitert Ultraschnellladenetz auf 1 000 Stationen in DACH — Schwerpunkt Autobahn-Knotenpunkte</div>
|
||||
<div class="text-[11px] text-ink-3 mt-1 flex items-center gap-1.5"><svg width="9" height="9" viewBox="0 0 11 11" class="text-ok"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg><span>Ionity GmbH · München</span></div>
|
||||
</div>
|
||||
<span></span>
|
||||
</a>
|
||||
|
||||
<!-- FEED-AD nach Position 6 -->
|
||||
<div class="my-2">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="h-px flex-1" style="background:#C8BDA8;"></span>
|
||||
<span class="text-[9px] font-bold tracking-[0.22em] uppercase font-mono" style="color:#8A847B;">Anzeige</span>
|
||||
<span class="h-px flex-1" style="background:#C8BDA8;"></span>
|
||||
</div>
|
||||
<a class="grid items-baseline p-4 gap-4" style="grid-template-columns:60px 120px 1fr auto; background:#F1ECE2;">
|
||||
<span class="font-mono text-[12px]" style="color:#6E6862;">Promotion</span>
|
||||
<span class="text-[10.5px] font-bold tracking-[0.14em] uppercase" style="color:#6E6862;">Anzeige · Energie</span>
|
||||
<div>
|
||||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium" style="color:#3A332B;">Webinar 19. Nov: Wie Industrie-CFOs CCfD-Verträge richtig kalkulieren</div>
|
||||
<div class="text-[11px] mt-1" style="color:#6E6862;">PwC Deutschland · Carbon Advisory</div>
|
||||
</div>
|
||||
<span class="text-[9.5px] font-bold tracking-[0.1em] uppercase font-mono whitespace-nowrap px-1.5 py-0.5" style="color:#8A847B;border:1px solid #C8BDA8;">Promotion</span>
|
||||
</a>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="h-px flex-1" style="background:#C8BDA8;"></span>
|
||||
<span class="text-[9px] font-bold tracking-[0.22em] uppercase font-mono" style="color:#8A847B;">Ende Anzeige</span>
|
||||
<span class="h-px flex-1" style="background:#C8BDA8;"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="grid items-baseline py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 120px 1fr auto; gap:16px;">
|
||||
<span class="font-mono text-[12px] text-ink-3">10:48</span>
|
||||
<span class="bp-cat text-[10.5px]">Erneuerbare</span>
|
||||
<div>
|
||||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium">BayWa r.e. veräußert 660-MW-Solar-Portfolio Spanien an Allianz Capital Partners</div>
|
||||
<div class="text-[11px] text-ink-3 mt-1 flex items-center gap-1.5"><svg width="9" height="9" viewBox="0 0 11 11" class="text-ok"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg><span>BayWa r.e. AG · München</span></div>
|
||||
</div>
|
||||
<span></span>
|
||||
</a>
|
||||
|
||||
<a class="grid items-baseline py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 120px 1fr auto; gap:16px;">
|
||||
<span class="font-mono text-[12px] text-ink-3">09:33</span>
|
||||
<span class="bp-cat text-[10.5px]">Wasserstoff</span>
|
||||
<div>
|
||||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium flex items-baseline gap-2 flex-wrap">
|
||||
<span>Linde plc und Sasol vereinbaren Joint Venture für grünen Wasserstoff in Mitteldeutschland</span>
|
||||
<span class="inline-flex items-center gap-1 text-[9.5px] font-bold tracking-[0.1em] uppercase text-brand font-mono border border-brand/30 px-1.5 py-px" style="background:rgba(204,55,51,0.04);">
|
||||
<svg width="9" height="9" viewBox="0 0 12 12"><path d="M6 1l1.5 3.2 3.5.4-2.6 2.4.7 3.5L6 8.8l-3.1 1.7.7-3.5L1 4.6l3.5-.4z" fill="currentColor"/></svg>Empfehlung
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-[11px] text-ink-3 mt-1 flex items-center gap-1.5"><svg width="9" height="9" viewBox="0 0 11 11" class="text-ok"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg><span>Linde plc · Dublin</span></div>
|
||||
</div>
|
||||
<span></span>
|
||||
</a>
|
||||
|
||||
<a class="grid items-baseline py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 120px 1fr auto; gap:16px;">
|
||||
<span class="font-mono text-[12px] text-ink-3">09:18</span>
|
||||
<span class="bp-cat text-[10.5px]">Klimapolitik</span>
|
||||
<div>
|
||||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium">EU-Kommission notifiziert deutsches Carbon-Contracts-for-Difference-Programm — Auszahlung ab Juli möglich</div>
|
||||
<div class="text-[11px] text-ink-3 mt-1 flex items-center gap-1.5"><svg width="9" height="9" viewBox="0 0 11 11" class="text-ok"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg><span>Bundesnetzagentur · Bonn</span></div>
|
||||
</div>
|
||||
<span></span>
|
||||
</a>
|
||||
|
||||
<a class="grid items-baseline py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 120px 1fr auto; gap:16px;">
|
||||
<span class="font-mono text-[12px] text-ink-3">08:15</span>
|
||||
<span class="bp-cat text-[10.5px]">Speicher</span>
|
||||
<div>
|
||||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium">Northvolt Germany sichert sich 1,1 Mrd. € Finanzierung für Zellfabrik Heide — Baubeginn verschoben auf Q2 2026</div>
|
||||
<div class="text-[11px] text-ink-3 mt-1 flex items-center gap-1.5"><svg width="9" height="9" viewBox="0 0 11 11" class="text-ok"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg><span>Northvolt Germany GmbH · Heide</span></div>
|
||||
</div>
|
||||
<span></span>
|
||||
</a>
|
||||
|
||||
<a class="grid items-baseline py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 120px 1fr auto; gap:16px;">
|
||||
<span class="font-mono text-[12px] text-ink-3">07:42</span>
|
||||
<span class="bp-cat text-[10.5px]">Öl & Gas</span>
|
||||
<div>
|
||||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium">Wintershall Dea schliesst Trennung des russischen Geschäfts ab — Bilanzwirkung im Q3-Bericht erwartet</div>
|
||||
<div class="text-[11px] text-ink-3 mt-1 flex items-center gap-1.5"><svg width="9" height="9" viewBox="0 0 11 11" class="text-ok"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg><span>Wintershall Dea GmbH · Kassel</span></div>
|
||||
</div>
|
||||
<span></span>
|
||||
</a>
|
||||
|
||||
<div class="flex justify-between items-center mt-7">
|
||||
<span class="text-[11.5px] text-ink-3">12 von 284 Meldungen · letzte 7 Tage</span>
|
||||
<button class="px-3.5 py-2.5 text-[13px] font-semibold border border-bg-rule-strong bg-white text-ink hover:bg-bg-elev">Weitere 272 Meldungen anzeigen →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SIDEBAR -->
|
||||
<aside class="flex flex-col gap-9">
|
||||
<!-- Meistgelesen -->
|
||||
<div>
|
||||
<header class="flex items-baseline justify-between mb-3 min-h-[34px]">
|
||||
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px]">Meistgelesen</h2>
|
||||
<span class="eyebrow muted text-[10px]">in dieser Branche</span>
|
||||
</header>
|
||||
<div class="inline-flex mb-3 border border-bg-rule-strong bg-bg-elev">
|
||||
<button class="px-3 py-1.5 text-[11px] font-semibold font-mono uppercase tracking-wider text-ink-2">24 h</button>
|
||||
<button class="px-3 py-1.5 text-[11px] font-semibold font-mono uppercase tracking-wider bg-ink text-bg border-l border-bg-rule">7 Tage</button>
|
||||
<button class="px-3 py-1.5 text-[11px] font-semibold font-mono uppercase tracking-wider text-ink-2 border-l border-bg-rule">30 Tage</button>
|
||||
</div>
|
||||
<hr class="rule-strong mb-1" />
|
||||
|
||||
<div class="py-3.5 border-b border-bg-rule">
|
||||
<div class="grid items-baseline gap-2.5 mb-1.5" style="grid-template-columns:32px 1fr auto;">
|
||||
<div class="font-serif text-[18px] text-brand font-semibold leading-none">1</div>
|
||||
<div class="font-serif text-[14px] leading-[1.3] font-medium">RWE: 1,8-GW-Offshore-Park Helgoland startet</div>
|
||||
<span class="font-mono text-[11px] text-ink-3">9.842</span>
|
||||
</div>
|
||||
<div class="ml-[42px] h-[3px] bg-bg-rule"><div class="h-full bg-brand" style="width:100%;"></div></div>
|
||||
</div>
|
||||
<div class="py-3.5 border-b border-bg-rule">
|
||||
<div class="grid items-baseline gap-2.5 mb-1.5" style="grid-template-columns:32px 1fr auto;">
|
||||
<div class="font-serif text-[18px] text-brand font-semibold leading-none">2</div>
|
||||
<div class="font-serif text-[14px] leading-[1.3] font-medium">BMWK: 12-Mrd-Programm Industrie-Dekarbonisierung</div>
|
||||
<span class="font-mono text-[11px] text-ink-3">8.214</span>
|
||||
</div>
|
||||
<div class="ml-[42px] h-[3px] bg-bg-rule"><div class="h-full bg-brand" style="width:83%;"></div></div>
|
||||
</div>
|
||||
<div class="py-3.5 border-b border-bg-rule">
|
||||
<div class="grid items-baseline gap-2.5 mb-1.5" style="grid-template-columns:32px 1fr auto;">
|
||||
<div class="font-serif text-[18px] text-brand font-semibold leading-none">3</div>
|
||||
<div class="font-serif text-[14px] leading-[1.3] font-medium">Fluence Gigafactory Halle — 380 neue Stellen</div>
|
||||
<span class="font-mono text-[11px] text-ink-3">6.428</span>
|
||||
</div>
|
||||
<div class="ml-[42px] h-[3px] bg-bg-rule"><div class="h-full bg-brand" style="width:65%;"></div></div>
|
||||
</div>
|
||||
<div class="py-3.5 border-b border-bg-rule">
|
||||
<div class="grid items-baseline gap-2.5 mb-1.5" style="grid-template-columns:32px 1fr auto;">
|
||||
<div class="font-serif text-[18px] text-brand font-semibold leading-none">4</div>
|
||||
<div class="font-serif text-[14px] leading-[1.3] font-medium">TenneT vergibt 2,3-Mrd-Auftrag SuedLink</div>
|
||||
<span class="font-mono text-[11px] text-ink-3">5.102</span>
|
||||
</div>
|
||||
<div class="ml-[42px] h-[3px] bg-bg-rule"><div class="h-full bg-brand" style="width:52%;"></div></div>
|
||||
</div>
|
||||
<div class="py-3.5">
|
||||
<div class="grid items-baseline gap-2.5 mb-1.5" style="grid-template-columns:32px 1fr auto;">
|
||||
<div class="font-serif text-[18px] text-brand font-semibold leading-none">5</div>
|
||||
<div class="font-serif text-[14px] leading-[1.3] font-medium">Linde / Sasol JV für grünen Wasserstoff</div>
|
||||
<span class="font-mono text-[11px] text-ink-3">3.914</span>
|
||||
</div>
|
||||
<div class="ml-[42px] h-[3px] bg-bg-rule"><div class="h-full bg-brand" style="width:40%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter CTA -->
|
||||
<div class="p-6 bg-strip text-ink-on-dark" style="background:#1A1F26;">
|
||||
<div class="eyebrow mb-2" style="color:#FF8B6F;">Branchen-Briefing</div>
|
||||
<h3 class="font-serif text-[20px] font-semibold m-0 mb-2 text-white leading-[1.2]" style="letter-spacing:-0.2px;">Energie & Klima — kompakt im Postfach</h3>
|
||||
<p class="text-[12.5px] leading-[1.55] m-0 mb-4 text-white/85">Jeden Freitag · Top-Meldungen, Studien, Termine · 8 Min. Lesezeit</p>
|
||||
<input type="email" placeholder="ihre@firma.de" readonly class="w-full px-3 py-2.5 text-[12px] text-white mb-2.5 outline-none" style="border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.06);" />
|
||||
<button class="w-full px-3 py-2.5 text-[13px] font-semibold bg-brand text-white hover:bg-brand-deep">Kostenlos abonnieren →</button>
|
||||
<div class="mt-2.5 text-[10.5px] text-white/55 leading-[1.45]">DSGVO-konform · Abbestellung jederzeit möglich</div>
|
||||
</div>
|
||||
|
||||
<!-- Top-Newsrooms -->
|
||||
<div>
|
||||
<header class="flex items-baseline justify-between mb-3.5 min-h-[34px]">
|
||||
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px]">Top-Newsrooms</h2>
|
||||
<span class="eyebrow muted text-[10px]">letzte 7 Tage</span>
|
||||
</header>
|
||||
<hr class="rule-strong mb-1" />
|
||||
|
||||
<a class="grid items-center gap-3 py-3 border-b border-bg-rule" style="grid-template-columns:32px 1fr auto;">
|
||||
<div class="w-8 h-8 inline-flex items-center justify-center text-white text-[14px] font-bold font-serif" style="background:#1D4E8B;">R</div>
|
||||
<div><div class="text-[13.5px] font-semibold leading-[1.2]">RWE AG</div><div class="text-[11px] text-ink-3 mt-0.5"><span class="font-mono">12</span> Meldungen letzte 7 Tage</div></div>
|
||||
<span class="inline-flex items-center gap-1 text-[10.5px] font-semibold text-ink-2 px-2 py-[3px] whitespace-nowrap" style="background:rgba(204,55,51,0.06);border:1px solid rgba(204,55,51,0.18);"><span class="w-1.5 h-1.5 rounded-full bg-brand pulse-dot"></span>heute aktiv</span>
|
||||
</a>
|
||||
<a class="grid items-center gap-3 py-3 border-b border-bg-rule" style="grid-template-columns:32px 1fr auto;">
|
||||
<div class="w-8 h-8 inline-flex items-center justify-center text-white text-[14px] font-bold font-serif" style="background:#005C32;">E</div>
|
||||
<div><div class="text-[13.5px] font-semibold leading-[1.2]">EnBW Energie</div><div class="text-[11px] text-ink-3 mt-0.5"><span class="font-mono">9</span> Meldungen letzte 7 Tage</div></div>
|
||||
<span class="inline-flex items-center gap-1 text-[10.5px] font-semibold text-ink-2 px-2 py-[3px] whitespace-nowrap" style="background:rgba(204,55,51,0.06);border:1px solid rgba(204,55,51,0.18);"><span class="w-1.5 h-1.5 rounded-full bg-brand pulse-dot"></span>heute aktiv</span>
|
||||
</a>
|
||||
<a class="grid items-center gap-3 py-3 border-b border-bg-rule" style="grid-template-columns:32px 1fr auto;">
|
||||
<div class="w-8 h-8 inline-flex items-center justify-center text-white text-[14px] font-bold font-serif" style="background:#0098A6;">S</div>
|
||||
<div><div class="text-[13.5px] font-semibold leading-[1.2]">Siemens Energy</div><div class="text-[11px] text-ink-3 mt-0.5"><span class="font-mono">11</span> Meldungen letzte 7 Tage</div></div>
|
||||
<span class="inline-flex items-center gap-1 text-[10.5px] font-semibold text-ink-2 px-2 py-[3px] whitespace-nowrap" style="background:rgba(204,55,51,0.06);border:1px solid rgba(204,55,51,0.18);"><span class="w-1.5 h-1.5 rounded-full bg-brand pulse-dot"></span>heute aktiv</span>
|
||||
</a>
|
||||
<a class="grid items-center gap-3 py-3 border-b border-bg-rule" style="grid-template-columns:32px 1fr auto;">
|
||||
<div class="w-8 h-8 inline-flex items-center justify-center text-white text-[14px] font-bold font-serif" style="background:#000000;">B</div>
|
||||
<div><div class="text-[13.5px] font-semibold leading-[1.2]">BMWK</div><div class="text-[11px] text-ink-3 mt-0.5"><span class="font-mono">7</span> Meldungen letzte 7 Tage</div></div>
|
||||
<span class="inline-flex items-center gap-1 text-[10.5px] font-semibold text-ink-2 px-2 py-[3px] whitespace-nowrap" style="background:rgba(204,55,51,0.06);border:1px solid rgba(204,55,51,0.18);"><span class="w-1.5 h-1.5 rounded-full bg-brand pulse-dot"></span>heute aktiv</span>
|
||||
</a>
|
||||
<a class="grid items-center gap-3 py-3 border-b border-bg-rule" style="grid-template-columns:32px 1fr auto;">
|
||||
<div class="w-8 h-8 inline-flex items-center justify-center text-white text-[14px] font-bold font-serif" style="background:#D85C28;">T</div>
|
||||
<div><div class="text-[13.5px] font-semibold leading-[1.2]">TenneT</div><div class="text-[11px] text-ink-3 mt-0.5"><span class="font-mono">6</span> Meldungen letzte 7 Tage</div></div>
|
||||
<span class="inline-flex items-center gap-1 text-[10.5px] font-semibold text-ink-2 px-2 py-[3px] whitespace-nowrap" style="background:rgba(204,55,51,0.06);border:1px solid rgba(204,55,51,0.18);"><span class="w-1.5 h-1.5 rounded-full bg-brand pulse-dot"></span>heute aktiv</span>
|
||||
</a>
|
||||
<a class="grid items-center gap-3 py-3" style="grid-template-columns:32px 1fr auto;">
|
||||
<div class="w-8 h-8 inline-flex items-center justify-center text-white text-[14px] font-bold font-serif" style="background:#1F1F1F;">V</div>
|
||||
<div><div class="text-[13.5px] font-semibold leading-[1.2]">Vaillant</div><div class="text-[11px] text-ink-3 mt-0.5"><span class="font-mono">4</span> Meldungen letzte 7 Tage</div></div>
|
||||
<span class="inline-flex items-center gap-1 text-[10.5px] font-semibold text-ink-2 px-2 py-[3px] whitespace-nowrap" style="background:rgba(204,55,51,0.06);border:1px solid rgba(204,55,51,0.18);"><span class="w-1.5 h-1.5 rounded-full bg-brand pulse-dot"></span>heute aktiv</span>
|
||||
</a>
|
||||
<a class="block mt-3 text-[12px] text-brand font-semibold">Alle 312 Newsrooms in Energie & Klima →</a>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<!-- ============== SUB-INDEX ============== -->
|
||||
<section class="mt-16">
|
||||
<header class="flex items-baseline justify-between mb-4">
|
||||
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px]">Sub-Branchen <span class="text-[14px] text-ink-3 font-normal ml-1.5">· Volumen letzte 30 Tage</span></h2>
|
||||
<span class="eyebrow muted">7-Tage-Trend</span>
|
||||
</header>
|
||||
<hr class="rule-strong" />
|
||||
<div class="grid grid-cols-4 border-b border-bg-rule">
|
||||
<a class="block px-[22px] py-5 border-r border-bg-rule">
|
||||
<div class="flex justify-between items-baseline mb-2"><span class="text-[14px] font-semibold">Erneuerbare</span><span class="font-mono text-[12px] text-gain font-semibold">+18%</span></div>
|
||||
<div class="flex items-baseline gap-2 mb-1.5"><span class="font-serif text-[24px] font-semibold tracking-[-0.3px]">412</span><span class="text-[11px] text-ink-3">Meldungen</span></div>
|
||||
<div class="text-[11px] text-ink-3 mb-2.5">Volumen <span class="font-mono text-ink-2">€3,2 Mrd.</span></div>
|
||||
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-gain" style="width:100%;"></div></div>
|
||||
</a>
|
||||
<a class="block px-[22px] py-5 border-r border-bg-rule">
|
||||
<div class="flex justify-between items-baseline mb-2"><span class="text-[14px] font-semibold">Wasserstoff</span><span class="font-mono text-[12px] text-gain font-semibold">+24%</span></div>
|
||||
<div class="flex items-baseline gap-2 mb-1.5"><span class="font-serif text-[24px] font-semibold tracking-[-0.3px]">184</span><span class="text-[11px] text-ink-3">Meldungen</span></div>
|
||||
<div class="text-[11px] text-ink-3 mb-2.5">Volumen <span class="font-mono text-ink-2">€1,4 Mrd.</span></div>
|
||||
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-gain" style="width:78%;"></div></div>
|
||||
</a>
|
||||
<a class="block px-[22px] py-5 border-r border-bg-rule">
|
||||
<div class="flex justify-between items-baseline mb-2"><span class="text-[14px] font-semibold">Klimapolitik</span><span class="font-mono text-[12px] text-gain font-semibold">+6%</span></div>
|
||||
<div class="flex items-baseline gap-2 mb-1.5"><span class="font-serif text-[24px] font-semibold tracking-[-0.3px]">174</span><span class="text-[11px] text-ink-3">Meldungen</span></div>
|
||||
<div class="text-[11px] text-ink-3 mb-2.5">Volumen <span class="font-mono text-ink-2">€2,1 Mrd.</span></div>
|
||||
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-gain" style="width:60%;"></div></div>
|
||||
</a>
|
||||
<a class="block px-[22px] py-5">
|
||||
<div class="flex justify-between items-baseline mb-2"><span class="text-[14px] font-semibold">E-Mobilität</span><span class="font-mono text-[12px] text-gain font-semibold">+11%</span></div>
|
||||
<div class="flex items-baseline gap-2 mb-1.5"><span class="font-serif text-[24px] font-semibold tracking-[-0.3px]">198</span><span class="text-[11px] text-ink-3">Meldungen</span></div>
|
||||
<div class="text-[11px] text-ink-3 mb-2.5">Volumen <span class="font-mono text-ink-2">€840 Mio.</span></div>
|
||||
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-gain" style="width:70%;"></div></div>
|
||||
</a>
|
||||
<a class="block px-[22px] py-5 border-t border-r border-bg-rule">
|
||||
<div class="flex justify-between items-baseline mb-2"><span class="text-[14px] font-semibold">Netze</span><span class="font-mono text-[12px] text-gain font-semibold">+4%</span></div>
|
||||
<div class="flex items-baseline gap-2 mb-1.5"><span class="font-serif text-[24px] font-semibold tracking-[-0.3px]">156</span><span class="text-[11px] text-ink-3">Meldungen</span></div>
|
||||
<div class="text-[11px] text-ink-3 mb-2.5">Volumen <span class="font-mono text-ink-2">€1,8 Mrd.</span></div>
|
||||
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-gain" style="width:55%;"></div></div>
|
||||
</a>
|
||||
<a class="block px-[22px] py-5 border-t border-r border-bg-rule">
|
||||
<div class="flex justify-between items-baseline mb-2"><span class="text-[14px] font-semibold">Wärme & Gebäude</span><span class="font-mono text-[12px] text-gain font-semibold">+9%</span></div>
|
||||
<div class="flex items-baseline gap-2 mb-1.5"><span class="font-serif text-[24px] font-semibold tracking-[-0.3px]">121</span><span class="text-[11px] text-ink-3">Meldungen</span></div>
|
||||
<div class="text-[11px] text-ink-3 mb-2.5">Volumen <span class="font-mono text-ink-2">€720 Mio.</span></div>
|
||||
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-gain" style="width:48%;"></div></div>
|
||||
</a>
|
||||
<a class="block px-[22px] py-5 border-t border-r border-bg-rule">
|
||||
<div class="flex justify-between items-baseline mb-2"><span class="text-[14px] font-semibold">Speicher</span><span class="font-mono text-[12px] text-gain font-semibold">+15%</span></div>
|
||||
<div class="flex items-baseline gap-2 mb-1.5"><span class="font-serif text-[24px] font-semibold tracking-[-0.3px]">98</span><span class="text-[11px] text-ink-3">Meldungen</span></div>
|
||||
<div class="text-[11px] text-ink-3 mb-2.5">Volumen <span class="font-mono text-ink-2">€640 Mio.</span></div>
|
||||
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-gain" style="width:38%;"></div></div>
|
||||
</a>
|
||||
<a class="block px-[22px] py-5 border-t border-bg-rule">
|
||||
<div class="flex justify-between items-baseline mb-2"><span class="text-[14px] font-semibold">Öl & Gas</span><span class="font-mono text-[12px] text-loss font-semibold">-3%</span></div>
|
||||
<div class="flex items-baseline gap-2 mb-1.5"><span class="font-serif text-[24px] font-semibold tracking-[-0.3px]">92</span><span class="text-[11px] text-ink-3">Meldungen</span></div>
|
||||
<div class="text-[11px] text-ink-3 mb-2.5">Volumen <span class="font-mono text-ink-2">€410 Mio.</span></div>
|
||||
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-brand" style="width:36%;"></div></div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============== STUDIEN & WHITEPAPER ============== -->
|
||||
<section class="mt-16">
|
||||
<header class="flex items-baseline justify-between mb-4">
|
||||
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px]">Studien & Whitepaper</h2>
|
||||
<a class="text-[12.5px] text-brand font-semibold">Alle 38 Publikationen →</a>
|
||||
</header>
|
||||
<hr class="rule-strong mb-6" />
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<div class="p-[22px] grid gap-[18px] items-start" style="grid-template-columns:auto 1fr; background:#F1ECE2; border-top:3px solid #C84A1E;">
|
||||
<div class="relative flex flex-col w-20 h-[104px] bg-white border border-bg-rule-strong flex-shrink-0">
|
||||
<div class="h-3 bg-brand"></div>
|
||||
<div class="px-2 pt-2 flex-1 flex flex-col gap-1">
|
||||
<div style="height:2.5px;width:100%;background:#D6D2C8;"></div>
|
||||
<div style="height:2.5px;width:85%;background:#D6D2C8;"></div>
|
||||
<div style="height:2.5px;width:70%;background:#D6D2C8;"></div>
|
||||
<div style="height:2.5px;width:95%;background:#D6D2C8;"></div>
|
||||
<div style="height:2.5px;width:60%;background:#D6D2C8;"></div>
|
||||
<div style="height:2.5px;width:50%;background:#D6D2C8;"></div>
|
||||
</div>
|
||||
<div class="absolute bottom-1.5 right-1.5 text-[8px] font-mono text-ink-4">PDF</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="eyebrow mb-2 text-[10px]">Studie · Branchen-Monitor</div>
|
||||
<h3 class="font-serif text-[18px] font-semibold m-0 mb-2.5 tracking-[-0.2px] leading-[1.25]">Energiewende-Monitor 2025 — Investitionen, Engpässe, Potenziale im DACH-Raum</h3>
|
||||
<div class="text-[12px] text-ink-3 mb-3.5">
|
||||
Fraunhofer-Institut für Solare Energiesysteme<br />
|
||||
<span class="font-mono text-[11px]">84 Seiten · Veröffentlicht 11. November 2025</span>
|
||||
</div>
|
||||
<div class="flex gap-2 items-center">
|
||||
<button class="px-3.5 py-2 text-[12px] font-semibold border border-ink text-ink bg-transparent">↓ Herunterladen</button>
|
||||
<span class="text-[10.5px] text-ink-3 inline-flex items-center gap-1.5">
|
||||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" style="color:#8A847B;"><rect x="2.5" y="5.5" width="7" height="5" stroke="currentColor" stroke-width="1"/><path d="M4 5.5V4a2 2 0 014 0v1.5" stroke="currentColor" stroke-width="1" fill="none"/></svg>
|
||||
Anmeldung per E-Mail
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-[22px] grid gap-[18px] items-start" style="grid-template-columns:auto 1fr; background:#F1ECE2; border-top:3px solid #C84A1E;">
|
||||
<div class="relative flex flex-col w-20 h-[104px] bg-white border border-bg-rule-strong flex-shrink-0">
|
||||
<div class="h-3 bg-brand"></div>
|
||||
<div class="px-2 pt-2 flex-1 flex flex-col gap-1">
|
||||
<div style="height:2.5px;width:100%;background:#D6D2C8;"></div>
|
||||
<div style="height:2.5px;width:85%;background:#D6D2C8;"></div>
|
||||
<div style="height:2.5px;width:70%;background:#D6D2C8;"></div>
|
||||
<div style="height:2.5px;width:95%;background:#D6D2C8;"></div>
|
||||
<div style="height:2.5px;width:60%;background:#D6D2C8;"></div>
|
||||
<div style="height:2.5px;width:50%;background:#D6D2C8;"></div>
|
||||
</div>
|
||||
<div class="absolute bottom-1.5 right-1.5 text-[8px] font-mono text-ink-4">PDF</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="eyebrow mb-2 text-[10px]">Whitepaper · Wasserstoff</div>
|
||||
<h3 class="font-serif text-[18px] font-semibold m-0 mb-2.5 tracking-[-0.2px] leading-[1.25]">Grüner Wasserstoff in der Stahl- und Chemieindustrie — Roadmap 2026 – 2032</h3>
|
||||
<div class="text-[12px] text-ink-3 mb-3.5">
|
||||
BDI / Boston Consulting Group<br />
|
||||
<span class="font-mono text-[11px]">42 Seiten · Veröffentlicht 28. Oktober 2025</span>
|
||||
</div>
|
||||
<div class="flex gap-2 items-center">
|
||||
<button class="px-3.5 py-2 text-[12px] font-semibold border border-ink text-ink bg-transparent">↓ Herunterladen</button>
|
||||
<span class="text-[10.5px] text-ink-3 inline-flex items-center gap-1.5">
|
||||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" style="color:#8A847B;"><rect x="2.5" y="5.5" width="7" height="5" stroke="currentColor" stroke-width="1"/><path d="M4 5.5V4a2 2 0 014 0v1.5" stroke="currentColor" stroke-width="1" fill="none"/></svg>
|
||||
Anmeldung per E-Mail
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============== TERMINE ============== -->
|
||||
<section class="mt-16">
|
||||
<header class="flex items-baseline justify-between mb-4">
|
||||
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px]">Branchen-Termine</h2>
|
||||
<span class="eyebrow muted">Nächste 7 Tage · Quelle: Bundesanzeiger, Veranstalter</span>
|
||||
</header>
|
||||
<hr class="rule-strong" />
|
||||
<div class="grid grid-cols-5 border-b border-bg-rule">
|
||||
<div class="px-5 py-[18px] border-r border-bg-rule">
|
||||
<div class="flex items-baseline gap-1.5 mb-2.5"><span class="text-[10px] font-bold tracking-[0.12em] text-ink-3 uppercase">Mi</span><span class="font-serif text-[22px] font-semibold tracking-[-0.3px] leading-none">12. Nov</span></div>
|
||||
<span class="bp-cat text-[10px]">Hauptversammlung</span>
|
||||
<h3 class="font-serif text-[14.5px] leading-[1.25] m-0 my-2 font-semibold">RWE AG · Außerordentliche Hauptversammlung</h3>
|
||||
<div class="text-[11px] text-ink-3">Essen · Grugahalle</div>
|
||||
</div>
|
||||
<div class="px-5 py-[18px] border-r border-bg-rule">
|
||||
<div class="flex items-baseline gap-1.5 mb-2.5"><span class="text-[10px] font-bold tracking-[0.12em] text-ink-3 uppercase">Do</span><span class="font-serif text-[22px] font-semibold tracking-[-0.3px] leading-none">13. Nov</span></div>
|
||||
<span class="bp-cat text-[10px]">Q3-Bericht</span>
|
||||
<h3 class="font-serif text-[14.5px] leading-[1.25] m-0 my-2 font-semibold">Siemens Energy · Q4 / Jahresergebnis</h3>
|
||||
<div class="text-[11px] text-ink-3">München · 07:00 Uhr</div>
|
||||
</div>
|
||||
<div class="px-5 py-[18px] border-r border-bg-rule">
|
||||
<div class="flex items-baseline gap-1.5 mb-2.5"><span class="text-[10px] font-bold tracking-[0.12em] text-ink-3 uppercase">Mo</span><span class="font-serif text-[22px] font-semibold tracking-[-0.3px] leading-none">17. Nov</span></div>
|
||||
<span class="bp-cat text-[10px]">Konferenz</span>
|
||||
<h3 class="font-serif text-[14.5px] leading-[1.25] m-0 my-2 font-semibold">Handelsblatt Energie-Gipfel 2025</h3>
|
||||
<div class="text-[11px] text-ink-3">Berlin · CityCube</div>
|
||||
</div>
|
||||
<div class="px-5 py-[18px] border-r border-bg-rule">
|
||||
<div class="flex items-baseline gap-1.5 mb-2.5"><span class="text-[10px] font-bold tracking-[0.12em] text-ink-3 uppercase">Di</span><span class="font-serif text-[22px] font-semibold tracking-[-0.3px] leading-none">18. Nov</span></div>
|
||||
<span class="bp-cat text-[10px]">Messe</span>
|
||||
<h3 class="font-serif text-[14.5px] leading-[1.25] m-0 my-2 font-semibold">Hydrogen Technology Expo Europe</h3>
|
||||
<div class="text-[11px] text-ink-3">Hamburg · Messehallen</div>
|
||||
</div>
|
||||
<div class="px-5 py-[18px]">
|
||||
<div class="flex items-baseline gap-1.5 mb-2.5"><span class="text-[10px] font-bold tracking-[0.12em] text-ink-3 uppercase">Mi</span><span class="font-serif text-[22px] font-semibold tracking-[-0.3px] leading-none">19. Nov</span></div>
|
||||
<span class="bp-cat text-[10px]">Bekanntmachung</span>
|
||||
<h3 class="font-serif text-[14.5px] leading-[1.25] m-0 my-2 font-semibold">BNetzA · Ausschreibungsergebnis Offshore</h3>
|
||||
<div class="text-[11px] text-ink-3">Bonn · 11:00 Uhr</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3.5 text-[12.5px]"><a class="text-brand font-semibold">Alle Termine im Branchen-Kalender →</a></div>
|
||||
</section>
|
||||
|
||||
<!-- ============== VERWANDTE BRANCHEN ============== -->
|
||||
<section class="mt-16">
|
||||
<header class="mb-4"><h2 class="font-serif text-[22px] font-semibold m-0 tracking-[-0.2px]">Verwandte Branchen</h2></header>
|
||||
<hr class="rule mb-5" />
|
||||
<div class="flex flex-wrap gap-2.5">
|
||||
<a class="inline-flex items-baseline gap-2 px-3.5 py-2.5 text-[13px] font-semibold bg-bg-elev border border-bg-rule-strong">Industrie & Maschinenbau <span class="font-mono text-[11px] text-ink-3 font-medium">248</span></a>
|
||||
<a class="inline-flex items-baseline gap-2 px-3.5 py-2.5 text-[13px] font-semibold bg-bg-elev border border-bg-rule-strong">Chemie & Werkstoffe <span class="font-mono text-[11px] text-ink-3 font-medium">184</span></a>
|
||||
<a class="inline-flex items-baseline gap-2 px-3.5 py-2.5 text-[13px] font-semibold bg-bg-elev border border-bg-rule-strong">Automobil & Mobilität <span class="font-mono text-[11px] text-ink-3 font-medium">312</span></a>
|
||||
<a class="inline-flex items-baseline gap-2 px-3.5 py-2.5 text-[13px] font-semibold bg-bg-elev border border-bg-rule-strong">Bauen & Immobilien <span class="font-mono text-[11px] text-ink-3 font-medium">156</span></a>
|
||||
<a class="inline-flex items-baseline gap-2 px-3.5 py-2.5 text-[13px] font-semibold bg-bg-elev border border-bg-rule-strong">Finanzen & Versicherung <span class="font-mono text-[11px] text-ink-3 font-medium">421</span></a>
|
||||
<a class="inline-flex items-baseline gap-2 px-3.5 py-2.5 text-[13px] font-semibold bg-bg-elev border border-bg-rule-strong">Politik & Verwaltung <span class="font-mono text-[11px] text-ink-3 font-medium">198</span></a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============== PUBLISHER-CTA ============== -->
|
||||
<section class="mt-16 p-9 text-ink-on-dark" style="background:#1A1F26;">
|
||||
<div class="grid gap-9 items-center" style="grid-template-columns:1.4fr 1fr;">
|
||||
<div>
|
||||
<div class="eyebrow mb-2.5" style="color:#FF8B6F;">Für Unternehmen aus Energie & Klima</div>
|
||||
<h3 class="font-serif text-[28px] font-semibold m-0 mb-2.5 leading-[1.15] text-white" style="letter-spacing:-0.3px;">Veröffentlichen Sie Ihre Pressemitteilung gezielt in der Energiewirtschaft.</h3>
|
||||
<p class="text-[14px] leading-[1.55] m-0 max-w-[540px] text-white/80">
|
||||
Reichweite über 312 aktive Newsrooms · Distribution an Fach- und Wirtschaftsredaktionen · Strukturierte Daten mit ISIN-, Standort- und Volumen-Bezug.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2.5">
|
||||
<button class="w-full px-[18px] py-3.5 text-[14px] font-semibold bg-brand text-white hover:bg-brand-deep">Pressemitteilung einreichen →</button>
|
||||
<button class="w-full px-[18px] py-3 text-[14px] font-semibold text-white" style="border:1px solid rgba(255,255,255,0.3);background:transparent;">Tarife & Branchen-Pakete ansehen</button>
|
||||
<div class="text-[11px] text-white/55 text-center mt-1">Redaktionelle Prüfung · DSGVO-konform · Erst-Veröffentlichung kostenfrei</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- ============== FOOTER MINI ============== -->
|
||||
<footer class="bg-bg-footer text-ink-on-dark-2 pt-8 pb-6">
|
||||
<div class="max-w-layout mx-auto px-8 flex justify-between items-center text-[12px]">
|
||||
<div class="font-serif text-[18px] text-white font-semibold">businessportal<span class="text-brand">24</span></div>
|
||||
<div class="flex gap-[18px]">
|
||||
<a href="#" class="hover:text-white">Impressum</a>
|
||||
<a href="#" class="hover:text-white">Datenschutz</a>
|
||||
<a href="#" class="hover:text-white">AGB</a>
|
||||
<a href="#" class="hover:text-white">Mediadaten</a>
|
||||
<a href="#" class="hover:text-white">Kontakt</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
|
||||
</html>
|
||||
716
dev/frontend/tailwind_v3/Detailseite Tailwind.html
Normal file
716
dev/frontend/tailwind_v3/Detailseite Tailwind.html
Normal file
|
|
@ -0,0 +1,716 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>businessportal24 — Detailseite · Pressemitteilung</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
|
||||
<!-- Tailwind v3 CDN + projekt-eigene Konfiguration -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
/* Surfaces */
|
||||
bg: "#F6F4EF",
|
||||
"bg-elev": "#FBFAF6",
|
||||
"bg-rule": "#E5E0D5",
|
||||
"bg-rule-strong": "#1C1A17",
|
||||
"bg-dark": "#14202E",
|
||||
"bg-card-warm": "#F1ECE2",
|
||||
"bg-card-warm-border": "#D9CDB6",
|
||||
"bg-footer": "#0F1216",
|
||||
topbar: "#1A1F26",
|
||||
topbar2: "#232A33",
|
||||
/* Ink */
|
||||
ink: "#1C1A17",
|
||||
"ink-2": "#3D3935",
|
||||
"ink-3": "#6E6862",
|
||||
"ink-4": "#9A958D",
|
||||
"ink-on-dark": "#F6F4EF",
|
||||
"ink-on-dark-2": "#B8B3AA",
|
||||
/* Brand */
|
||||
brand: "#C84A1E",
|
||||
"brand-deep": "#A23814",
|
||||
"brand-soft": "#F4E5DD",
|
||||
live: "#E03A1A",
|
||||
gain: "#2E8540",
|
||||
loss: "#C8341E",
|
||||
ok: "#2E8540",
|
||||
/* Status accents */
|
||||
"warn-bg": "#FFF8E1",
|
||||
"warn-border": "#E8C77A",
|
||||
"warn-ink": "#7A5A0F",
|
||||
"warn-ink-deep": "#3D2F0F",
|
||||
"verify-bg": "#E8F4EC",
|
||||
"verify-border": "#1B8E3A",
|
||||
"verify-ink": "#0F5E26",
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['"Inter Tight"','"Söhne"','Inter','system-ui','sans-serif'],
|
||||
serif: ['"Source Serif 4"','"Source Serif Pro"','Charter','"Iowan Old Style"','Georgia','serif'],
|
||||
mono: ['"JetBrains Mono"','"SF Mono"','ui-monospace','monospace'],
|
||||
},
|
||||
maxWidth: { layout: "1280px" },
|
||||
backgroundImage: {
|
||||
"topbar-grad": "linear-gradient(135deg,#1A1F26 0%,#232A33 100%)",
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html,body { margin:0; padding:0; }
|
||||
body { background:#E8E4DA; font-family:"Inter Tight",system-ui,sans-serif; }
|
||||
|
||||
/* Helper utilities, da Tailwind-CDN keine Custom-Plugins kompiliert */
|
||||
.eyebrow {
|
||||
font-size: 11px; font-weight: 600;
|
||||
letter-spacing: 0.12em; text-transform: uppercase;
|
||||
color: #C84A1E;
|
||||
}
|
||||
.eyebrow.muted { color:#6E6862; }
|
||||
.bp-cat {
|
||||
font-size: 11px; font-weight: 700;
|
||||
letter-spacing: 0.14em; text-transform: uppercase;
|
||||
color:#C84A1E;
|
||||
}
|
||||
.rule-strong { height:1px; background:#1C1A17; border:0; margin:0; }
|
||||
.rule { height:1px; background:#E5E0D5; border:0; margin:0; }
|
||||
|
||||
/* Hatch-pattern (Hero-Bildplatzhalter) */
|
||||
.hatch-dark { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 10px, transparent 10px 20px); }
|
||||
.hatch-light { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 6px, transparent 6px 12px); }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-bg text-ink font-sans antialiased">
|
||||
|
||||
<!-- ===================================================================
|
||||
ROOT — 1280px Artboard · Detailseite Pressemitteilung (Variante A)
|
||||
=================================================================== -->
|
||||
<article class="mx-auto bg-bg relative" style="width:1280px;">
|
||||
|
||||
<!-- Reading progress bar -->
|
||||
<div class="absolute top-0 left-0 right-0 h-0.5 bg-bg-rule z-10">
|
||||
<div class="h-full bg-brand" style="width:32%;"></div>
|
||||
</div>
|
||||
|
||||
<!-- ============== TOP UTILITY BAR ============== -->
|
||||
<div class="bg-topbar-grad text-ink-on-dark-2 border-b border-black">
|
||||
<div class="max-w-layout mx-auto px-8 flex items-stretch text-[11.5px] tracking-wide">
|
||||
<span class="flex items-center pr-4 py-2 whitespace-nowrap border-r border-[#2A2723]">
|
||||
Do, 7. Mai 2026
|
||||
</span>
|
||||
<span class="flex items-center px-3.5 text-[9.5px] uppercase font-semibold tracking-[0.16em] text-[#6E6862] whitespace-nowrap">
|
||||
Ausgabe
|
||||
</span>
|
||||
|
||||
<!-- Edition tabs -->
|
||||
<button class="flex items-center gap-1.5 px-2.5 py-2 text-[11.5px] font-semibold text-ink-on-dark bg-white/[0.06] border-b-2 border-brand -mb-px whitespace-nowrap">
|
||||
<span class="text-[12px] leading-none">🇩🇪</span><span>DE</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-1.5 px-2.5 py-2 text-[11.5px] font-medium text-ink-on-dark-2 border-b-2 border-transparent -mb-px whitespace-nowrap">
|
||||
<span class="text-[12px] leading-none">🇦🇹</span><span>AT</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-1.5 px-2.5 py-2 text-[11.5px] font-medium text-ink-on-dark-2 border-b-2 border-transparent -mb-px whitespace-nowrap">
|
||||
<span class="text-[12px] leading-none">🇨🇭</span><span>CH</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-1.5 px-2.5 py-2 text-[11.5px] font-medium text-ink-on-dark-2 border-b-2 border-transparent -mb-px whitespace-nowrap">
|
||||
<span class="text-[12px] leading-none">🌐</span><span>EN</span>
|
||||
</button>
|
||||
|
||||
<span class="flex-1"></span>
|
||||
|
||||
<span class="flex items-center gap-4 py-2 whitespace-nowrap">
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" class="opacity-60">
|
||||
<circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1" />
|
||||
<path d="M1 6h10M6 1c2 1.5 2 8.5 0 10M6 1c-2 1.5-2 8.5 0 10" stroke="currentColor" stroke-width="1" fill="none" />
|
||||
</svg>
|
||||
<strong class="text-ink-on-dark font-semibold">Deutsch</strong>
|
||||
</span>
|
||||
<span class="w-px h-[14px] bg-[#2A2723]"></span>
|
||||
<a href="#" class="hover:text-ink-on-dark">Newsletter</a>
|
||||
<a href="#" class="hover:text-ink-on-dark">RSS</a>
|
||||
<a href="#" class="hover:text-ink-on-dark">API</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============== HEADER ============== -->
|
||||
<header class="bg-bg border-b border-bg-rule">
|
||||
<div class="max-w-layout mx-auto px-8 py-[18px] grid items-center gap-6"
|
||||
style="grid-template-columns:auto 1fr auto auto;">
|
||||
<div>
|
||||
<div class="font-serif text-[28px] font-semibold leading-none tracking-[-0.5px]">
|
||||
businessportal<span class="text-brand">24</span>
|
||||
</div>
|
||||
<div class="eyebrow muted mt-1 text-[9.5px] tracking-[0.18em]">
|
||||
Pressemitteilungen · DACH
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-[460px]">
|
||||
<div class="flex items-center gap-2.5 px-3.5 py-2.5 border border-bg-rule bg-bg-elev text-[13px] text-ink-3 rounded-[2px]">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="7" cy="7" r="5" stroke="currentColor" stroke-width="1.5" />
|
||||
<path d="M11 11l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
||||
</svg>
|
||||
<span class="flex-1">Pressemitteilungen, Unternehmen, Branchen, ISIN…</span>
|
||||
<span class="text-[10.5px] text-ink-4 border border-bg-rule px-1.5 py-0.5 rounded-[2px] font-mono">⌘K</span>
|
||||
</div>
|
||||
<div class="flex justify-end mt-1.5">
|
||||
<button class="inline-flex items-center gap-1.5 text-[11.5px] text-ink-3 underline underline-offset-2 decoration-bg-rule-strong/40">
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M2 3h8M3.5 6h5M5 9h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" />
|
||||
</svg>
|
||||
Erweiterte Suche
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2.5 text-[13px] font-semibold text-ink rounded-[2px]">
|
||||
Anmelden
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold text-white bg-brand hover:bg-brand-deep rounded-[2px] transition-colors">
|
||||
Veröffentlichen
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M3 6h6M6 3l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ============== MAIN NAV ============== -->
|
||||
<nav class="bg-bg border-b border-bg-rule">
|
||||
<div class="max-w-layout mx-auto px-8 flex items-stretch">
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Startseite</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Wirtschaft</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Technologie</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Finanzen</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Industrie</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-semibold text-ink border-b-2 border-brand -mb-px">Energie</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Gesundheit</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Handel</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Immobilien</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Mobilität</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Alle Rubriken</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ============== BREADCRUMBS ============== -->
|
||||
<div class="max-w-layout mx-auto px-8 pt-7">
|
||||
<nav class="flex gap-2 text-[11.5px] text-ink-3 mb-2 font-mono tracking-wide">
|
||||
<a href="#" class="hover:text-ink">Startseite</a>
|
||||
<span>/</span>
|
||||
<a href="#" class="hover:text-ink">Branchen</a>
|
||||
<span>/</span>
|
||||
<a href="#" class="text-brand hover:text-brand-deep">Energie & Klima</a>
|
||||
<span>/</span>
|
||||
<span>Pressemitteilung</span>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- ============== HERO META BLOCK ============== -->
|
||||
<section class="max-w-layout mx-auto px-8">
|
||||
<div class="pt-[18px] pb-8 border-b border-bg-rule">
|
||||
|
||||
<!-- Embargo -->
|
||||
<div class="flex items-center gap-2.5 mb-3.5">
|
||||
<span class="text-[9.5px] font-bold tracking-[0.18em] uppercase text-brand px-2.5 py-[3px] border border-brand font-mono">
|
||||
● Embargo aufgehoben
|
||||
</span>
|
||||
<span class="text-[11px] text-ink-3 font-mono">7. Mai 2026, 14:32</span>
|
||||
</div>
|
||||
|
||||
<!-- Rubrik + Audience -->
|
||||
<div class="flex items-center gap-3.5 mb-4">
|
||||
<a href="#" class="bp-cat hover:text-brand-deep">Energie & Klima</a>
|
||||
<span class="w-1 h-1 rounded-full bg-ink-4"></span>
|
||||
<span class="text-[11px] text-ink-3 italic font-serif">Für Wirtschaftsjournalisten</span>
|
||||
</div>
|
||||
|
||||
<!-- Headline -->
|
||||
<h1 class="font-serif text-[48px] font-semibold m-0 mb-[22px] tracking-[-0.8px] leading-[1.1] max-w-[980px]" style="text-wrap:balance;">
|
||||
Energiewende 2030: BMWK kündigt 12-Milliarden-Programm zur Industrie-Dekarbonisierung an
|
||||
</h1>
|
||||
|
||||
<!-- Lead -->
|
||||
<p class="font-serif text-[21px] leading-[1.45] m-0 mb-7 text-ink-2 max-w-[880px] font-normal" style="text-wrap:pretty;">
|
||||
Das neue Förderprogramm soll deutsche Industrie-Cluster bis 2030 klimaneutral aufstellen. Erste Tranche von 4,8 Mrd. Euro fließt ab dem dritten Quartal 2026 in Stahl-, Chemie- und Zementwerke. Bundesminister Habeck spricht von „strukturellem Wendepunkt" für den Industriestandort Deutschland.
|
||||
</p>
|
||||
|
||||
<!-- Meta-Zeile -->
|
||||
<div class="flex flex-wrap items-center text-[12.5px] text-ink-2" style="gap:10px 22px;">
|
||||
<span class="inline-flex items-center gap-2">
|
||||
<span class="w-7 h-7 bg-black text-white inline-flex items-center justify-center text-[13px] font-bold font-serif">B</span>
|
||||
<span class="font-semibold">Bundesministerium für Wirtschaft und Klimaschutz</span>
|
||||
</span>
|
||||
<span class="w-px h-[14px] bg-bg-rule-strong"></span>
|
||||
<span class="font-mono text-[11.5px] text-ink-3">7. Mai 2026 · 14:32 Uhr</span>
|
||||
<span class="font-mono text-[11.5px] text-ink-3">4 Min. Lesezeit · 712 Wörter</span>
|
||||
<span class="inline-flex items-center gap-1.5 font-mono text-[11.5px] text-ink-3">
|
||||
<svg width="11" height="11" viewBox="0 0 14 14" fill="none"><path d="M7 1a5 5 0 015 5c0 4-5 7-5 7s-5-3-5-7a5 5 0 015-5z" stroke="currentColor" stroke-width="1.3" fill="none" /><circle cx="7" cy="6" r="1.5" fill="currentColor" /></svg>
|
||||
Deutschland · Berlin
|
||||
</span>
|
||||
|
||||
<!-- Redaktionsempfehlung -->
|
||||
<span class="inline-flex items-center gap-1.5 px-2 py-[3px] text-[9.5px] font-bold tracking-[0.14em] uppercase text-brand bg-brand/[0.04] border border-brand/30 font-mono cursor-help"
|
||||
title="Diese Pressemitteilung wurde von der Redaktion empfohlen — basierend auf Quellenqualität, Verifizierungsstatus und redaktioneller Relevanz.">
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2l9 4v6c0 5-3.5 9-9 10-5.5-1-9-5-9-10V6z" stroke="currentColor" stroke-width="2" fill="none" />
|
||||
<path d="M8 12l3 3 5-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
Redaktionsempfehlung
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============== HERO IMAGE ============== -->
|
||||
<section class="max-w-layout mx-auto px-8 pt-8">
|
||||
<div class="relative flex items-end p-[18px] bg-bg-dark hatch-dark" style="aspect-ratio:21/9;">
|
||||
<span class="text-[10px] font-mono tracking-wider uppercase text-white/50">
|
||||
Bild · Pressefoto BMWK (16:9)
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-[11.5px] text-ink-3 mt-2.5 italic max-w-[720px]">
|
||||
Bundesminister Habeck bei der Vorstellung des Programms im Bundestag · Foto: BMWK / Susanne Eriksson
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============== BODY + SIDEBAR ============== -->
|
||||
<section class="max-w-layout mx-auto px-8 pt-10 grid" style="grid-template-columns:1fr 280px; gap:56px;">
|
||||
|
||||
<!-- ============== BODY ============== -->
|
||||
<div>
|
||||
<!-- Korrektur-Hinweis -->
|
||||
<div class="mb-6 px-4 py-3 bg-warn-bg border border-warn-border flex gap-3 items-start">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" class="flex-shrink-0 mt-0.5 text-warn-ink">
|
||||
<path d="M12 3l10 18H2z" stroke="currentColor" stroke-width="1.6" fill="none" />
|
||||
<path d="M12 10v5M12 17.5v.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
|
||||
</svg>
|
||||
<div class="text-[13px] leading-[1.5] text-warn-ink-deep">
|
||||
<strong class="block mb-0.5 font-mono text-[10.5px] tracking-[0.14em] uppercase text-warn-ink">
|
||||
Korrektur · 7. Mai 2026, 16:08
|
||||
</strong>
|
||||
Die zunächst genannte Förderhöhe von 11,5 Mrd. Euro wurde nach einer Klarstellung des BMWK auf 12 Mrd. Euro berichtigt.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Article Body -->
|
||||
<div class="max-w-[680px]">
|
||||
<p class="font-serif text-[17px] leading-[1.65] m-0 mb-[18px] text-ink" style="text-wrap:pretty;">
|
||||
Berlin · Das Bundesministerium für Wirtschaft und Klimaschutz hat heute ein 12-Milliarden-Euro-Förderprogramm vorgestellt, das die Dekarbonisierung der deutschen Schwerindustrie bis 2030 entscheidend beschleunigen soll. Die Mittel stammen aus dem Klima- und Transformationsfonds (KTF) und werden in drei Tranchen über die kommenden 36 Monate ausgereicht.
|
||||
</p>
|
||||
<p class="font-serif text-[17px] leading-[1.65] m-0 mb-[18px] text-ink" style="text-wrap:pretty;">
|
||||
Im Zentrum des Programms steht die Umstellung von Stahl-, Chemie- und Zementproduktion auf grüne Verfahren. Erste 4,8 Milliarden Euro sollen ab dem dritten Quartal 2026 in konkrete Vorhaben fließen — darunter Wasserstoff-Direktreduktion bei thyssenkrupp und elektrische Lichtbogenöfen bei der Salzgitter AG.
|
||||
</p>
|
||||
|
||||
<h2 class="font-serif text-[22px] font-semibold mt-8 mb-3.5 tracking-[-0.3px] leading-[1.25]">
|
||||
Drei Förderlinien, klare Schwerpunkte
|
||||
</h2>
|
||||
<p class="font-serif text-[17px] leading-[1.65] m-0 mb-[18px] text-ink" style="text-wrap:pretty;">
|
||||
Die Mittel verteilen sich auf drei Förderlinien: Carbon Contracts for Difference (CCfD) für die energieintensive Schwerindustrie, Investitionszuschüsse für mittelständische Industriecluster, und Forschungsförderung für skalierbare Speicher- und CCS-Technologien. Anträge können ab dem 1. Juli 2026 über die Bundesförderbank KfW gestellt werden.
|
||||
</p>
|
||||
|
||||
<!-- Zitat -->
|
||||
<blockquote class="my-7 pl-6 border-l-[3px] border-brand">
|
||||
<p class="font-serif text-[21px] font-medium leading-[1.4] italic text-ink m-0 mb-3 tracking-[-0.2px]" style="text-wrap:balance;">
|
||||
„Wir reden hier nicht über Symbolpolitik. Diese 12 Milliarden sind die Brücke zwischen Klimazielen und Industriestandort. Wer jetzt nicht investiert, fährt 2030 mit veralteter Technik gegen die Wand."
|
||||
</p>
|
||||
<cite class="not-italic text-[12px] text-ink-3 font-mono tracking-wide">
|
||||
— Robert Habeck, Bundesminister für Wirtschaft und Klimaschutz
|
||||
</cite>
|
||||
</blockquote>
|
||||
|
||||
<h2 class="font-serif text-[22px] font-semibold mt-8 mb-3.5 tracking-[-0.3px] leading-[1.25]">
|
||||
Reaktionen aus Wirtschaft und Wissenschaft
|
||||
</h2>
|
||||
<p class="font-serif text-[17px] leading-[1.65] m-0 mb-[18px] text-ink" style="text-wrap:pretty;">
|
||||
Die Bundesvereinigung der Deutschen Arbeitgeberverbände (BDA) begrüßte das Programm grundsätzlich, mahnte jedoch eine schnellere Auszahlung an. „Die Industrie braucht Planungssicherheit für die Investitionsentscheidungen 2026 und 2027 — der Zeitplan muss straff bleiben", sagte BDA-Hauptgeschäftsführer Steffen Kampeter.
|
||||
</p>
|
||||
<p class="font-serif text-[17px] leading-[1.65] m-0 mb-[18px] text-ink" style="text-wrap:pretty;">
|
||||
Aus der Wissenschaft kam differenziertes Lob: Das Fraunhofer-Institut für System- und Innovationsforschung (ISI) bewertet das Volumen als angemessen, sieht aber methodische Lücken bei der Wirkungskontrolle. Eine Begleitstudie soll ab 2027 die tatsächliche CO₂-Einsparung messen.
|
||||
</p>
|
||||
|
||||
<h2 class="font-serif text-[22px] font-semibold mt-8 mb-3.5 tracking-[-0.3px] leading-[1.25]">
|
||||
Zeitplan und nächste Schritte
|
||||
</h2>
|
||||
<p class="font-serif text-[17px] leading-[1.65] m-0 mb-[18px] text-ink" style="text-wrap:pretty;">
|
||||
Die Förderrichtlinien werden in den kommenden vier Wochen final ausgearbeitet und Anfang Juni 2026 im Bundesanzeiger veröffentlicht. Ab dem 1. Juli ist die Antragsstellung über die KfW möglich. Die zweite Tranche von 4 Milliarden Euro folgt im ersten Quartal 2027, die dritte im Verlauf von 2028.
|
||||
</p>
|
||||
|
||||
<!-- Boilerplate -->
|
||||
<div class="mt-9 pt-5 border-t border-bg-rule-strong">
|
||||
<div class="eyebrow muted text-[9.5px] mb-2.5">Über das Unternehmen</div>
|
||||
<p class="text-[13px] leading-[1.6] text-ink-3 m-0 max-w-[620px]">
|
||||
Über das Bundesministerium für Wirtschaft und Klimaschutz: Das BMWK gestaltet die Wirtschafts- und Klimaschutzpolitik der Bundesregierung. Zu den Aufgaben gehören Industriepolitik, Außenhandel, Energie- und Klimapolitik, Mittelstand und Innovation. Sitz des Ministeriums ist Berlin, mit einem Dienstsitz in Bonn. Geleitet wird das Haus seit Dezember 2021 von Bundesminister Robert Habeck.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============== INLINE AD ============== -->
|
||||
<div class="my-8">
|
||||
<div class="flex items-center gap-2.5 mb-2.5">
|
||||
<span class="h-px bg-bg-rule-strong flex-1"></span>
|
||||
<span class="text-[9px] font-bold tracking-[0.22em] text-[#8A847B] uppercase font-mono">Anzeige</span>
|
||||
<span class="h-px bg-bg-rule-strong flex-1"></span>
|
||||
</div>
|
||||
<a href="#" class="grid px-[22px] py-5 bg-bg-card-warm items-center gap-[22px]" style="grid-template-columns:120px 1fr;">
|
||||
<div class="aspect-square bg-white hatch-light flex items-center justify-center text-[9px] text-[#8A847B] font-mono">
|
||||
LOGO
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[9.5px] font-bold tracking-[0.16em] uppercase mb-1.5" style="color:#6E6862;">SAP · Branchen-Whitepaper</div>
|
||||
<h3 class="font-serif text-[18px] leading-[1.3] m-0 mb-2 font-semibold tracking-[-0.2px]" style="color:#2A2520;">
|
||||
CO₂-Reporting nach CSRD: Was Industriebetriebe jetzt automatisieren müssen
|
||||
</h3>
|
||||
<div class="text-[12px] leading-[1.5] mb-2.5" style="color:#5A544E;">
|
||||
Whitepaper · 32 Seiten · Praxisleitfaden für Mittelstand und Konzerne
|
||||
</div>
|
||||
<span class="text-[12px] font-semibold underline" style="color:#3A332B;">Studie kostenfrei anfordern →</span>
|
||||
</div>
|
||||
</a>
|
||||
<div class="flex items-center gap-2.5 mt-2.5">
|
||||
<span class="h-px bg-bg-rule-strong flex-1"></span>
|
||||
<span class="text-[9px] font-bold tracking-[0.22em] text-[#8A847B] uppercase font-mono">Ende Anzeige</span>
|
||||
<span class="h-px bg-bg-rule-strong flex-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============== PRESSEKONTAKT-BLOCK ============== -->
|
||||
<div class="mt-8 px-7 py-6 bg-white border border-bg-rule-strong">
|
||||
<div class="eyebrow mb-3 text-[10.5px]">Pressekontakt</div>
|
||||
|
||||
<div class="flex gap-1.5 items-center mb-1">
|
||||
<strong class="font-serif text-[19px] font-semibold tracking-[-0.2px]">Dr. Annika Werthmann</strong>
|
||||
<span title="Verifizierter Publisher — Identität und Domain bestätigt" class="inline-flex items-center text-verify-border flex-shrink-0">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 1l2.5 3 3.8-.4-.5 3.8L21 9l-2.6 2.5L19 15l-3.8.4L12 19l-2.5-3.6L5.7 15 5.6 11.4 3 9l2.5-1.6L4.7 4 8.5 4z" fill="currentColor" />
|
||||
<path d="M7.5 12l3 3 6-6" stroke="white" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-[12.5px] text-ink-3 mb-3.5 leading-[1.5]">
|
||||
Pressesprecherin · Referat Öffentlichkeitsarbeit<br />
|
||||
Bundesministerium für Wirtschaft und Klimaschutz
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 text-[12.5px] font-mono">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" class="text-ink-3 flex-shrink-0"><path d="M7 1a5 5 0 015 5c0 4-5 7-5 7s-5-3-5-7a5 5 0 015-5zm0 3.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" fill="currentColor" /></svg>
|
||||
<span class="text-ink-2">Scharnhorststraße 34–37 · 10115 Berlin</span>
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" class="text-ink-3 flex-shrink-0"><path d="M2 3l3-1 1.5 3-1.5 1c.5 2 2 3.5 4 4l1-1.5L13 10l-1 3c-5 0-10-5-10-10z" fill="currentColor" /></svg>
|
||||
<span class="text-ink-2">+49 30 18 615 - 6121</span>
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" class="text-ink-3 flex-shrink-0"><path d="M1 3h12v8H1zM1 3l6 4 6-4" stroke="currentColor" stroke-width="1.2" fill="none" /></svg>
|
||||
<a href="/cdn-cgi/l/email-protection#bfcfcddaccccdaffddd2c8d491ddcad1db91dbda" class="text-ink underline underline-offset-2"><span class="__cf_email__" data-cfemail="e6969483959583a6848b918dc884938882c88283">[email protected]</span></a>
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" class="text-ink-3 flex-shrink-0"><circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.2" fill="none" /><path d="M1.5 7h11M7 1.5c2 1.5 2 9.5 0 11M7 1.5c-2 1.5-2 9.5 0 11" stroke="currentColor" stroke-width="1" fill="none" /></svg>
|
||||
<a href="#" class="text-ink underline underline-offset-2">bmwk.bund.de</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 pt-3.5 border-t border-bg-rule text-[10.5px] text-ink-4 leading-[1.5]">
|
||||
Sie sind als Pressekontakt für diese Mitteilung hinterlegt?
|
||||
<a href="#" class="text-ink-3 underline">Pressemitteilung verwalten →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============== SIDEBAR (rechts) ============== -->
|
||||
<aside class="flex flex-col gap-7">
|
||||
|
||||
<!-- Publisher Box -->
|
||||
<div class="p-4 bg-white border border-bg-rule-strong">
|
||||
<div class="eyebrow muted text-[9.5px] mb-3">Veröffentlicht von</div>
|
||||
<div class="flex gap-3 items-start mb-3">
|
||||
<span class="w-11 h-11 bg-black text-white inline-flex items-center justify-center text-[20px] font-bold font-serif flex-shrink-0">B</span>
|
||||
<div class="min-w-0">
|
||||
<strong class="block font-serif text-[14px] font-semibold leading-[1.25] tracking-[-0.1px] mb-0.5">BMWK</strong>
|
||||
<div class="text-[11px] text-ink-3 leading-[1.4]">
|
||||
Bundesministerium für Wirtschaft und Klimaschutz
|
||||
</div>
|
||||
<div class="text-[10.5px] text-ink-4 mt-1 font-mono">Berlin</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 px-2.5 py-2 mb-3 bg-verify-bg border border-verify-border text-verify-ink cursor-help"
|
||||
title="Identität und Domain durch businessportal24 bestätigt">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" class="text-verify-border flex-shrink-0">
|
||||
<path d="M12 1l2.5 3 3.8-.4-.5 3.8L21 9l-2.6 2.5L19 15l-3.8.4L12 19l-2.5-3.6L5.7 15 5.6 11.4 3 9l2.5-1.6L4.7 4 8.5 4z" fill="currentColor" />
|
||||
<path d="M7.5 12l3 3 6-6" stroke="white" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
<span class="text-[11.5px] font-semibold">Verifizierter Publisher</span>
|
||||
</div>
|
||||
|
||||
<div class="pt-3 border-t border-bg-rule flex flex-col gap-2">
|
||||
<button class="px-2.5 py-2 text-[11.5px] font-semibold bg-ink text-white hover:bg-black transition-colors">
|
||||
+ Newsroom folgen
|
||||
</button>
|
||||
<a href="#" class="text-[11.5px] text-ink-2 text-center py-1.5 underline underline-offset-2">
|
||||
Alle Mitteilungen →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Share -->
|
||||
<div>
|
||||
<div class="eyebrow muted text-[9.5px] mb-2.5">Teilen</div>
|
||||
<div class="grid grid-cols-2 gap-1.5">
|
||||
<button class="inline-flex items-center gap-[7px] px-2.5 py-2 text-[11.5px] font-medium bg-white border border-bg-rule-strong text-ink hover:bg-bg-elev">
|
||||
<svg width="13" height="13" viewBox="0 0 16 16"><path d="M3 6h2.5v8H3V6zm1.25-3a1.25 1.25 0 110 2.5 1.25 1.25 0 010-2.5zM7 6h2.4v1.1c.4-.7 1.3-1.3 2.6-1.3 2.7 0 3 1.7 3 3.9V14h-2.5v-3.7c0-.9 0-2-1.3-2s-1.5 1-1.5 2V14H7V6z" fill="currentColor" /></svg>
|
||||
LinkedIn
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-[7px] px-2.5 py-2 text-[11.5px] font-medium bg-white border border-bg-rule-strong text-ink hover:bg-bg-elev">
|
||||
<svg width="13" height="13" viewBox="0 0 16 16"><path d="M2 2l5.5 7.2L2 14h1.6l4.7-3.7L11.5 14H14L8.2 6.4 13.6 2H12L7.5 5.5 4.5 2H2z" fill="currentColor" /></svg>
|
||||
X
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-[7px] px-2.5 py-2 text-[11.5px] font-medium bg-white border border-bg-rule-strong text-ink hover:bg-bg-elev">
|
||||
<svg width="13" height="13" viewBox="0 0 16 16"><rect x="2" y="3" width="12" height="10" stroke="currentColor" stroke-width="1.3" fill="none" /><path d="M2 4l6 4 6-4" stroke="currentColor" stroke-width="1.3" fill="none" /></svg>
|
||||
E-Mail
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-[7px] px-2.5 py-2 text-[11.5px] font-medium bg-white border border-bg-rule-strong text-ink hover:bg-bg-elev">
|
||||
<svg width="13" height="13" viewBox="0 0 16 16"><path d="M6 9l4-4M5 4h2a3 3 0 010 6h-1M11 12H9a3 3 0 010-6h1" stroke="currentColor" stroke-width="1.3" fill="none" stroke-linecap="round" /></svg>
|
||||
Link kopieren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Tags -->
|
||||
<div>
|
||||
<div class="eyebrow muted text-[9.5px] mb-2.5">Schlagwörter</div>
|
||||
<div class="flex flex-wrap gap-[5px]">
|
||||
<a href="#" class="px-2.5 py-1 text-[11px] font-medium bg-white border border-bg-rule-strong text-ink-2 hover:text-ink">Energiewende</a>
|
||||
<a href="#" class="px-2.5 py-1 text-[11px] font-medium bg-white border border-bg-rule-strong text-ink-2 hover:text-ink">Dekarbonisierung</a>
|
||||
<a href="#" class="px-2.5 py-1 text-[11px] font-medium bg-white border border-bg-rule-strong text-ink-2 hover:text-ink">Industriepolitik</a>
|
||||
<a href="#" class="px-2.5 py-1 text-[11px] font-medium bg-white border border-bg-rule-strong text-ink-2 hover:text-ink">Wasserstoff</a>
|
||||
<a href="#" class="px-2.5 py-1 text-[11px] font-medium bg-white border border-bg-rule-strong text-ink-2 hover:text-ink">thyssenkrupp</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter Box (dark) -->
|
||||
<div class="p-4 bg-ink text-white">
|
||||
<div class="eyebrow text-[9.5px] mb-2" style="color:#FF8B6F;">Newsletter</div>
|
||||
<h4 class="font-serif text-[17px] font-semibold m-0 mb-2 leading-[1.25]">
|
||||
Energie & Klima · ab Score 80
|
||||
</h4>
|
||||
<p class="text-[11.5px] text-white/70 leading-[1.5] m-0 mb-3">
|
||||
Höchstens 2 Mails pro Woche. Nur Meldungen ab Content-Score 80.
|
||||
</p>
|
||||
<button class="w-full py-2.5 text-[12px] font-semibold bg-brand hover:bg-brand-deep text-white transition-colors">
|
||||
Abonnieren →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Ad -->
|
||||
<div>
|
||||
<div class="flex items-center gap-2.5 mb-2.5">
|
||||
<span class="h-px bg-bg-rule-strong flex-1"></span>
|
||||
<span class="text-[9px] font-bold tracking-[0.22em] text-[#8A847B] uppercase font-mono">Anzeige</span>
|
||||
<span class="h-px bg-bg-rule-strong flex-1"></span>
|
||||
</div>
|
||||
<article class="px-3.5 py-4 bg-bg-card-warm border border-bg-card-warm-border">
|
||||
<div class="text-[9px] tracking-[0.16em] uppercase mb-1.5 font-mono" style="color:#6E6862;">Cloud · Software</div>
|
||||
<h3 class="font-serif text-[15px] leading-[1.3] m-0 mb-2 font-medium" style="color:#3A332B;">
|
||||
Microsoft Azure: Neue EU-Region Frankfurt mit DSGVO-zertifizierter KI-Infrastruktur
|
||||
</h3>
|
||||
<div class="text-[11px] mt-1.5" style="color:#6E6862;">Microsoft Deutschland GmbH</div>
|
||||
</article>
|
||||
<div class="flex items-center gap-2.5 mt-2.5">
|
||||
<span class="h-px bg-bg-rule-strong flex-1"></span>
|
||||
<span class="text-[9px] font-bold tracking-[0.22em] text-[#8A847B] uppercase font-mono">Ende Anzeige</span>
|
||||
<span class="h-px bg-bg-rule-strong flex-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Secondary Actions -->
|
||||
<div>
|
||||
<div class="eyebrow muted text-[9.5px] mb-2.5">Weiterführend</div>
|
||||
<div class="flex flex-col border border-bg-rule-strong bg-white">
|
||||
<a href="#" class="flex items-center gap-2.5 px-3 py-2.5 text-[12px] text-ink-2 hover:bg-bg-elev">
|
||||
<svg width="13" height="13" viewBox="0 0 14 14" class="text-ink-3 flex-shrink-0"><path d="M2 1h7l3 3v9H2z" stroke="currentColor" stroke-width="1.3" fill="none" /><path d="M9 1v3h3" stroke="currentColor" stroke-width="1.3" fill="none" /></svg>
|
||||
<span class="flex-1">Permalink & Zitiervorschlag</span>
|
||||
<svg width="9" height="9" viewBox="0 0 12 12" fill="none" class="text-ink-4"><path d="M4 2l4 4-4 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" /></svg>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-2.5 px-3 py-2.5 text-[12px] text-ink-2 border-t border-bg-rule hover:bg-bg-elev">
|
||||
<svg width="13" height="13" viewBox="0 0 14 14" class="text-ink-3 flex-shrink-0"><path d="M2 4h10v8H2zM2 4V2h10v2" stroke="currentColor" stroke-width="1.3" fill="none" /></svg>
|
||||
<span class="flex-1">Drucken & PDF</span>
|
||||
<svg width="9" height="9" viewBox="0 0 12 12" fill="none" class="text-ink-4"><path d="M4 2l4 4-4 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" /></svg>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-2.5 px-3 py-2.5 text-[12px] text-ink-2 border-t border-bg-rule hover:bg-bg-elev">
|
||||
<svg width="13" height="13" viewBox="0 0 14 14" class="text-ink-3 flex-shrink-0"><path d="M3 11V3l8 4z" fill="currentColor" /></svg>
|
||||
<span class="flex-1">RSS-Feed von Bundesministerium</span>
|
||||
<svg width="9" height="9" viewBox="0 0 12 12" fill="none" class="text-ink-4"><path d="M4 2l4 4-4 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" /></svg>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-2.5 px-3 py-2.5 text-[12px] text-ink-2 border-t border-bg-rule hover:bg-bg-elev">
|
||||
<svg width="13" height="13" viewBox="0 0 14 14" class="text-ink-3 flex-shrink-0"><circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.3" fill="none" /><path d="M7 4v3.5M7 9.5v.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" /></svg>
|
||||
<span class="flex-1">Pressemitteilung melden</span>
|
||||
<svg width="9" height="9" viewBox="0 0 12 12" fill="none" class="text-ink-4"><path d="M4 2l4 4-4 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" /></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<!-- ============== RECOMMENDATIONS ============== -->
|
||||
<section class="max-w-layout mx-auto px-8 mt-14">
|
||||
<div class="grid grid-cols-2 gap-10">
|
||||
|
||||
<!-- Mehr von BMWK -->
|
||||
<div>
|
||||
<h3 class="font-serif text-[20px] font-semibold m-0 mb-1 tracking-[-0.2px]">Mehr von BMWK</h3>
|
||||
<div class="text-[11.5px] text-ink-3 mb-3.5">Aktuelle Mitteilungen aus diesem Newsroom</div>
|
||||
<hr class="rule-strong mb-1" />
|
||||
|
||||
<a href="#" class="grid items-baseline py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 1fr; gap:14px;">
|
||||
<span class="font-mono text-[11px] text-ink-3">5. Mai</span>
|
||||
<div>
|
||||
<span class="bp-cat text-[9px]">Wasserstoff</span>
|
||||
<h4 class="font-serif text-[15px] font-medium m-0 mt-1 leading-[1.3]">
|
||||
Wasserstoff-Importstrategie: BMWK präsentiert Partnerländer-Liste
|
||||
</h4>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="grid items-baseline py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 1fr; gap:14px;">
|
||||
<span class="font-mono text-[11px] text-ink-3">29. April</span>
|
||||
<div>
|
||||
<span class="bp-cat text-[9px]">Klima</span>
|
||||
<h4 class="font-serif text-[15px] font-medium m-0 mt-1 leading-[1.3]">
|
||||
EU-Emissionshandel: Deutschland fordert Verschärfung der Industrie-Quoten
|
||||
</h4>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="grid items-baseline py-3.5" style="grid-template-columns:60px 1fr; gap:14px;">
|
||||
<span class="font-mono text-[11px] text-ink-3">22. April</span>
|
||||
<div>
|
||||
<span class="bp-cat text-[9px]">Industrie</span>
|
||||
<h4 class="font-serif text-[15px] font-medium m-0 mt-1 leading-[1.3]">
|
||||
Industriestrompreis: Habeck konkretisiert Subventionsmodell für 2027
|
||||
</h4>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="block mt-3.5 text-[12.5px] font-semibold text-brand hover:text-brand-deep">
|
||||
Alle Mitteilungen von BMWK →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Verwandte Meldungen -->
|
||||
<div>
|
||||
<h3 class="font-serif text-[20px] font-semibold m-0 mb-1 tracking-[-0.2px]">Verwandte Meldungen</h3>
|
||||
<div class="text-[11.5px] text-ink-3 mb-3.5">Reaktionen, ähnliche Themen, Branchenkontext</div>
|
||||
<hr class="rule-strong mb-1" />
|
||||
|
||||
<a href="#" class="grid items-baseline py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 1fr; gap:14px;">
|
||||
<span class="font-mono text-[11px] text-ink-3">Heute</span>
|
||||
<div>
|
||||
<div class="flex items-baseline gap-2 flex-wrap">
|
||||
<span class="bp-cat text-[9px]">Stahl</span>
|
||||
<span class="text-[10.5px] text-ink-3 font-mono">thyssenkrupp AG</span>
|
||||
</div>
|
||||
<h4 class="font-serif text-[15px] font-medium m-0 mt-1 leading-[1.3]">
|
||||
thyssenkrupp begrüßt BMWK-Programm — Direktreduktions-Anlage Duisburg ab 2028
|
||||
</h4>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="grid items-baseline py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 1fr; gap:14px;">
|
||||
<span class="font-mono text-[11px] text-ink-3">Heute</span>
|
||||
<div>
|
||||
<div class="flex items-baseline gap-2 flex-wrap">
|
||||
<span class="bp-cat text-[9px]">Stahl</span>
|
||||
<span class="text-[10.5px] text-ink-3 font-mono">Salzgitter AG</span>
|
||||
</div>
|
||||
<h4 class="font-serif text-[15px] font-medium m-0 mt-1 leading-[1.3]">
|
||||
SALCOS-Programm: Salzgitter erwartet Förderzusage im dritten Quartal
|
||||
</h4>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="grid items-baseline py-3.5" style="grid-template-columns:60px 1fr; gap:14px;">
|
||||
<span class="font-mono text-[11px] text-ink-3">Gestern</span>
|
||||
<div>
|
||||
<div class="flex items-baseline gap-2 flex-wrap">
|
||||
<span class="bp-cat text-[9px]">Forschung</span>
|
||||
<span class="text-[10.5px] text-ink-3 font-mono">Fraunhofer ISI</span>
|
||||
</div>
|
||||
<h4 class="font-serif text-[15px] font-medium m-0 mt-1 leading-[1.3]">
|
||||
Studie: 12 Mrd. Euro reichen für 38% der Schwerindustrie-Transformation
|
||||
</h4>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="block mt-3.5 text-[12.5px] font-semibold text-brand hover:text-brand-deep">
|
||||
Alle Meldungen aus Energie & Klima →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============== FOOTER ============== -->
|
||||
<footer class="bg-bg-footer text-ink-on-dark-2 mt-16 pt-10 pb-6">
|
||||
<div class="max-w-layout mx-auto px-8">
|
||||
<div class="grid gap-8 mb-8" style="grid-template-columns:1.5fr 1fr 1fr 1fr;">
|
||||
|
||||
<div>
|
||||
<div class="font-serif text-[22px] font-semibold text-ink-on-dark">
|
||||
businessportal<span class="text-brand">24</span>
|
||||
</div>
|
||||
<p class="text-[12.5px] leading-[1.5] mt-3 max-w-[320px]">
|
||||
Pressemitteilungen aus Deutschland, Österreich und der Schweiz. Redaktionell geprüft. Strukturiert distribuiert.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="eyebrow text-ink-on-dark mb-3" style="color:#F6F4EF;">Redaktion</div>
|
||||
<a href="#" class="block py-1 text-[12.5px] hover:text-ink-on-dark">Über uns</a>
|
||||
<a href="#" class="block py-1 text-[12.5px] hover:text-ink-on-dark">Redaktionsrichtlinien</a>
|
||||
<a href="#" class="block py-1 text-[12.5px] hover:text-ink-on-dark">Kontakt</a>
|
||||
<a href="#" class="block py-1 text-[12.5px] hover:text-ink-on-dark">Impressum</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="eyebrow text-ink-on-dark mb-3" style="color:#F6F4EF;">Service</div>
|
||||
<a href="#" class="block py-1 text-[12.5px] hover:text-ink-on-dark">Pressemitteilung einreichen</a>
|
||||
<a href="#" class="block py-1 text-[12.5px] hover:text-ink-on-dark">API-Dokumentation</a>
|
||||
<a href="#" class="block py-1 text-[12.5px] hover:text-ink-on-dark">Newsletter</a>
|
||||
<a href="#" class="block py-1 text-[12.5px] hover:text-ink-on-dark">RSS-Feeds</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="eyebrow text-ink-on-dark mb-3" style="color:#F6F4EF;">Rechtliches</div>
|
||||
<a href="#" class="block py-1 text-[12.5px] hover:text-ink-on-dark">Datenschutz</a>
|
||||
<a href="#" class="block py-1 text-[12.5px] hover:text-ink-on-dark">AGB</a>
|
||||
<a href="#" class="block py-1 text-[12.5px] hover:text-ink-on-dark">Cookie-Einstellungen</a>
|
||||
<a href="#" class="block py-1 text-[12.5px] hover:text-ink-on-dark">Werbung</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="border:0;border-top:1px solid rgba(255,255,255,0.12);" />
|
||||
|
||||
<div class="flex justify-between mt-4 text-[11.5px]">
|
||||
<span>© 2026 businessportal24 GmbH</span>
|
||||
<span>DACH · DE · AT · CH</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</article>
|
||||
|
||||
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
|
||||
</html>
|
||||
1268
dev/frontend/tailwind_v3/Startseite Tailwind.html
Normal file
1268
dev/frontend/tailwind_v3/Startseite Tailwind.html
Normal file
File diff suppressed because it is too large
Load diff
1268
dev/frontend/tailwind_v3/Startseite presseecho Tailwind.html
Normal file
1268
dev/frontend/tailwind_v3/Startseite presseecho Tailwind.html
Normal file
File diff suppressed because it is too large
Load diff
642
dev/frontend/tailwind_v3/Veröffentlichen Tailwind.html
Normal file
642
dev/frontend/tailwind_v3/Veröffentlichen Tailwind.html
Normal file
|
|
@ -0,0 +1,642 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>businessportal24 — Pressemitteilung veröffentlichen</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
bg:"#F6F4EF","bg-elev":"#FBFAF6","bg-rule":"#E5E0D5","bg-rule-strong":"#1C1A17",
|
||||
"bg-card-warm":"#F1ECE2","bg-card-warm-border":"#D9CDB6",
|
||||
"bg-footer":"#0F1216","bg-strip":"#1A1F26",
|
||||
topbar:"#1A1F26",topbar2:"#232A33",
|
||||
ink:"#1C1A17","ink-2":"#3D3935","ink-3":"#6E6862","ink-4":"#9A958D",
|
||||
"ink-on-dark":"#F6F4EF","ink-on-dark-2":"#B8B3AA",
|
||||
brand:"#C84A1E","brand-deep":"#A23814","brand-soft":"#F4E5DD",
|
||||
live:"#E03A1A",gain:"#2E8540",loss:"#C8341E",ok:"#2E8540",
|
||||
},
|
||||
fontFamily: {
|
||||
sans:['"Inter Tight"','"Söhne"','Inter','system-ui','sans-serif'],
|
||||
serif:['"Source Serif 4"','"Source Serif Pro"','Charter','Georgia','serif'],
|
||||
mono:['"JetBrains Mono"','"SF Mono"','ui-monospace','monospace'],
|
||||
},
|
||||
maxWidth:{ layout:"1280px" },
|
||||
backgroundImage:{
|
||||
"topbar-grad":"linear-gradient(135deg,#1A1F26 0%,#232A33 100%)",
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html,body{margin:0;padding:0;} body{background:#E8E4DA;font-family:"Inter Tight",system-ui,sans-serif;}
|
||||
.eyebrow{font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#C84A1E;}
|
||||
.eyebrow.muted{color:#6E6862;}
|
||||
.bp-cat{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#C84A1E;}
|
||||
.rule-strong{height:1px;background:#1C1A17;border:0;margin:0;}
|
||||
.rule{height:1px;background:#E5E0D5;border:0;margin:0;}
|
||||
@keyframes bp-pulse{0%,100%{opacity:1}50%{opacity:.3}} .pulse-dot{animation:bp-pulse 1.6s ease-in-out infinite;}
|
||||
details > summary{list-style:none;cursor:pointer;}
|
||||
details > summary::-webkit-details-marker{display:none;}
|
||||
details[open] .faq-plus::before{content:"−";}
|
||||
details:not([open]) .faq-plus::before{content:"+";}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-bg text-ink font-sans antialiased">
|
||||
<div class="mx-auto bg-bg" style="width:1280px;">
|
||||
|
||||
<!-- ============== TOP UTILITY BAR ============== -->
|
||||
<div class="bg-topbar-grad text-ink-on-dark-2 border-b border-black">
|
||||
<div class="max-w-layout mx-auto px-8 flex items-stretch text-[11.5px] tracking-wide">
|
||||
<span class="flex items-center pr-4 py-2 whitespace-nowrap border-r border-[#2A2723]">Mi, 6. Mai 2026</span>
|
||||
<span class="flex items-center px-3.5 text-[9.5px] uppercase font-semibold tracking-[0.16em] text-[#6E6862] whitespace-nowrap">Ausgabe</span>
|
||||
<button class="flex items-center gap-1.5 px-2.5 py-2 text-[11.5px] font-semibold text-ink-on-dark bg-white/[0.06] border-b-2 border-brand -mb-px whitespace-nowrap"><span class="text-[12px] leading-none">🇩🇪</span><span>DE</span></button>
|
||||
<button class="flex items-center gap-1.5 px-2.5 py-2 text-[11.5px] font-medium text-ink-on-dark-2 border-b-2 border-transparent -mb-px whitespace-nowrap"><span class="text-[12px] leading-none">🇦🇹</span><span>AT</span></button>
|
||||
<button class="flex items-center gap-1.5 px-2.5 py-2 text-[11.5px] font-medium text-ink-on-dark-2 border-b-2 border-transparent -mb-px whitespace-nowrap"><span class="text-[12px] leading-none">🇨🇭</span><span>CH</span></button>
|
||||
<button class="flex items-center gap-1.5 px-2.5 py-2 text-[11.5px] font-medium text-ink-on-dark-2 border-b-2 border-transparent -mb-px whitespace-nowrap"><span class="text-[12px] leading-none">🌐</span><span>EN</span></button>
|
||||
<span class="flex-1"></span>
|
||||
<span class="flex items-center gap-4 py-2 whitespace-nowrap">
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" class="opacity-60"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1"/><path d="M1 6h10M6 1c2 1.5 2 8.5 0 10M6 1c-2 1.5-2 8.5 0 10" stroke="currentColor" stroke-width="1" fill="none"/></svg>
|
||||
<strong class="text-ink-on-dark font-semibold">Deutsch</strong>
|
||||
</span>
|
||||
<span class="w-px h-[14px] bg-[#2A2723]"></span>
|
||||
<a href="#" class="hover:text-ink-on-dark">Newsletter</a>
|
||||
<a href="#" class="hover:text-ink-on-dark">RSS</a>
|
||||
<a href="#" class="hover:text-ink-on-dark">API</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============== HEADER ============== -->
|
||||
<header class="bg-bg border-b border-bg-rule">
|
||||
<div class="max-w-layout mx-auto px-8 py-[18px] grid items-center gap-6" style="grid-template-columns:auto 1fr auto auto;">
|
||||
<div>
|
||||
<div class="font-serif text-[28px] font-semibold leading-none tracking-[-0.5px]">businessportal<span class="text-brand">24</span></div>
|
||||
<div class="eyebrow muted mt-1 text-[9.5px] tracking-[0.18em]">Pressemitteilungen · DACH</div>
|
||||
</div>
|
||||
<div class="w-full max-w-[540px]">
|
||||
<div class="flex items-center gap-2.5 px-3.5 py-2.5 border border-bg-rule bg-bg-elev text-[13px] text-ink-3">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5" stroke="currentColor" stroke-width="1.5"/><path d="M11 11l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
<span class="flex-1">Suche — Unternehmen, ISIN, Standort, Mitteilung…</span>
|
||||
<span class="text-[10.5px] text-ink-4 border border-bg-rule px-1.5 py-0.5 font-mono">⌘K</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="px-4 py-2.5 text-[13px] font-semibold text-ink">Anmelden</button>
|
||||
<button class="inline-flex items-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold text-white bg-brand hover:bg-brand-deep transition-colors">
|
||||
Veröffentlichen
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 6h6M6 3l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ============== MAIN NAV ============== -->
|
||||
<nav class="bg-bg border-b border-bg-rule">
|
||||
<div class="max-w-layout mx-auto px-8 flex items-stretch">
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Startseite</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Wirtschaft</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Technologie</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Finanzen</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Industrie</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Energie</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Gesundheit</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Handel</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Immobilien</a>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Mobilität</a>
|
||||
<span class="flex-1"></span>
|
||||
<a href="#" class="px-4 py-3.5 text-[13.5px] font-semibold text-ink border-b-2 border-brand -mb-px">Pressestelle</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ============== PUB SUBNAV ============== -->
|
||||
<div class="bg-bg border-b border-bg-rule">
|
||||
<div class="max-w-layout mx-auto px-8 py-2.5 flex items-center justify-between text-[12px] text-ink-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<a href="#" class="text-ink-3 hover:text-ink">businessportal24</a>
|
||||
<span class="text-ink-4">›</span>
|
||||
<span class="text-ink">Veröffentlichen</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-[18px]">
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<svg width="11" height="11" viewBox="0 0 11 11"><path d="M2 5.5l2.2 2.2L9 3" stroke="#2E8540" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>
|
||||
<span>Redaktionell geprüft seit 2012</span>
|
||||
</span>
|
||||
<span class="text-ink-4">·</span>
|
||||
<a href="#" class="text-ink-2 hover:text-ink">Hilfe & Support</a>
|
||||
<a href="#" class="text-ink-2 hover:text-ink">Mediadaten</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- ============== HERO ============== -->
|
||||
<section class="bg-bg">
|
||||
<div class="max-w-layout mx-auto px-8 pt-14 pb-12 grid items-start" style="grid-template-columns:1.35fr 1fr; gap:72px;">
|
||||
<!-- LEFT — editorial copy -->
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-7">
|
||||
<span class="w-7 h-px bg-brand"></span>
|
||||
<span class="eyebrow text-[11px]">Pressestelle · Veröffentlichen</span>
|
||||
</div>
|
||||
|
||||
<h1 class="font-serif text-[58px] font-semibold m-0 text-ink" style="line-height:1.05;letter-spacing:-1.2px;text-wrap:balance;">
|
||||
Pressemitteilung veröffentlichen.<br />
|
||||
Geprüft. Dauerhaft auffindbar.
|
||||
</h1>
|
||||
|
||||
<p class="font-serif mt-7 text-[19px] leading-[1.5] text-ink-2 max-w-[560px] font-normal">
|
||||
businessportal24 ist die Presseplattform für mittelständische Unternehmen, Selbstständige und PR-Agenturen aus Deutschland, Österreich und der Schweiz. Jede Mitteilung wird auf Qualität geprüft und bleibt dauerhaft im Archiv auffindbar.
|
||||
</p>
|
||||
|
||||
<!-- STÖRER — Hub-CTA -->
|
||||
<div class="relative mt-9 grid items-center overflow-hidden text-ink-on-dark" style="background:#1A1F26;grid-template-columns:1.4fr auto;gap:28px;padding:28px 32px 30px;">
|
||||
<span class="absolute left-0 top-0 bottom-0 w-[3px] bg-brand"></span>
|
||||
<div>
|
||||
<div class="eyebrow mb-2.5 text-[10.5px]" style="color:#FF8B6F;">Einreichen im Publisher-Bereich</div>
|
||||
<h3 class="font-serif m-0 text-[23px] font-semibold leading-[1.25] tracking-[-0.3px] text-ink-on-dark">Die Einreichung läuft über presseportale.com.</h3>
|
||||
<p class="mt-2.5 mb-0 text-[13.5px] leading-[1.55] text-ink-on-dark-2 max-w-[540px]">Dort verwalten Sie Mitteilungen, Credits und Newsroom — einmaliges Konto, beide Portale nutzbar (businessportal24 & presseecho.de).</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-2.5">
|
||||
<button class="inline-flex items-center gap-2 px-[22px] py-3.5 text-[14px] font-semibold text-white bg-brand hover:bg-brand-deep">
|
||||
Zum Publisher-Bereich
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="ml-0.5"><path d="M4 8L8.5 3.5M8.5 3.5H5M8.5 3.5V7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<span class="text-[11.5px] text-ink-on-dark-2">Login per Magic-Link · ohne Vertragsbindung</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="rule mt-2 mb-0" />
|
||||
|
||||
<!-- Faktenleiste -->
|
||||
<div class="grid grid-cols-4 border-b border-bg-rule">
|
||||
<div class="py-5 pr-5 border-r border-bg-rule">
|
||||
<div class="eyebrow muted text-[10px] mb-2 inline-flex items-center gap-1.5">Seit</div>
|
||||
<div class="font-serif text-[28px] font-semibold leading-none text-ink" style="letter-spacing:-0.4px;">2012</div>
|
||||
<div class="mt-2 text-[12px] leading-[1.4] text-ink-3">im Betrieb · über ein Jahrzehnt durchgehende Archivierung</div>
|
||||
</div>
|
||||
<div class="py-5 px-5 border-r border-bg-rule">
|
||||
<div class="eyebrow muted text-[10px] mb-2 inline-flex items-center gap-1.5">Archiv</div>
|
||||
<div class="font-serif text-[28px] font-semibold leading-none text-ink" style="letter-spacing:-0.4px;">100.000+</div>
|
||||
<div class="mt-2 text-[12px] leading-[1.4] text-ink-3">Mitteilungen weiterhin abrufbar — auch ältere Jahrgänge</div>
|
||||
</div>
|
||||
<div class="py-5 px-5 border-r border-bg-rule">
|
||||
<div class="eyebrow muted text-[10px] mb-2 inline-flex items-center gap-1.5">Reichweite</div>
|
||||
<div class="font-serif text-[28px] font-semibold leading-none text-ink" style="letter-spacing:-0.4px;">DACH</div>
|
||||
<div class="mt-2 text-[12px] leading-[1.4] text-ink-3">Deutschland, Österreich, Schweiz · vier Sprach-Ausgaben</div>
|
||||
</div>
|
||||
<div class="py-5 pl-5">
|
||||
<div class="eyebrow muted text-[10px] mb-2 inline-flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-brand pulse-dot"></span>Heute
|
||||
</div>
|
||||
<div class="font-serif text-[28px] font-semibold leading-none text-ink" style="letter-spacing:-0.4px;">12 / 4</div>
|
||||
<div class="mt-2 text-[12px] leading-[1.4] text-ink-3">veröffentlicht / in redaktioneller Prüfung — Stand 14:42 Uhr</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT — Beispiel-Mitteilung -->
|
||||
<aside class="sticky top-6">
|
||||
<div class="text-[11px] tracking-[0.14em] uppercase text-ink-3 font-semibold mb-2.5">So sieht eine veröffentlichte Mitteilung aus</div>
|
||||
<article class="bg-bg-elev border border-bg-rule" style="padding:22px 24px 24px;">
|
||||
<div class="flex items-center justify-between mb-3.5">
|
||||
<span class="bp-cat text-[10.5px]">Industrie · Maschinenbau</span>
|
||||
<span class="inline-flex items-center gap-1.5 text-[10.5px] text-ok font-semibold">
|
||||
<svg width="11" height="11" viewBox="0 0 11 11"><path d="M2 5.5l2.2 2.2L9 3" stroke="currentColor" stroke-width="1.7" fill="none" stroke-linecap="round"/></svg>
|
||||
Geprüft
|
||||
</span>
|
||||
</div>
|
||||
<h3 class="font-serif m-0 text-[22px] leading-[1.2] font-semibold text-ink" style="letter-spacing:-0.3px;">Mittelständische Fertiger eröffnet Werk im Westmünsterland und schafft 84 Arbeitsplätze</h3>
|
||||
<p class="font-serif mt-3.5 mb-0 text-[14px] leading-[1.55] text-ink-2">Coesfeld · Die Brinkmann Präzisionstechnik GmbH hat einen Erweiterungsbau in Betrieb genommen. Investitionsvolumen: 9,4 Mio. Euro. Geschäftsführer Michael Brinkmann nennt die regionale Anbindung als entscheidenden Faktor.</p>
|
||||
<hr class="rule" style="margin:18px 0 14px;" />
|
||||
<div class="flex flex-wrap text-[11.5px] text-ink-3" style="gap:8px 18px;">
|
||||
<span>Brinkmann Präzisionstechnik GmbH</span>
|
||||
<span class="text-ink-4">·</span>
|
||||
<span class="font-mono">14. Mai 2026, 09:30</span>
|
||||
<span class="text-ink-4">·</span>
|
||||
<span>3 Min. Lesezeit</span>
|
||||
</div>
|
||||
<div class="mt-3.5 px-3 py-2.5 bg-bg border border-bg-rule text-[11px] text-ink-3 font-mono flex items-center justify-between gap-2.5">
|
||||
<span>businessportal24.com/p/brinkmann-werk-coesfeld</span>
|
||||
<span class="text-ink-4">Permanent</span>
|
||||
</div>
|
||||
</article>
|
||||
<div class="mt-3.5 text-[11.5px] text-ink-3 leading-[1.5]">Beispiel. Jede Mitteilung erhält eine permanente URL, ein strukturiertes Datenblatt und bleibt im durchsuchbaren Archiv.</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============== NEWSROOMS — Fließtext ============== -->
|
||||
<section class="bg-bg border-t border-bg-rule">
|
||||
<div class="max-w-layout mx-auto px-8 py-[22px] grid items-baseline" style="grid-template-columns:auto 1fr auto; gap:28px;">
|
||||
<span class="eyebrow muted text-[10.5px] flex-shrink-0">Aktive Newsrooms heute</span>
|
||||
<p class="m-0 text-[13.5px] leading-[1.6] text-ink-2">
|
||||
<span class="text-ink font-medium">Siemens AG</span><span class="text-ink-4"> · </span>
|
||||
<span class="text-ink font-medium">BASF SE</span><span class="text-ink-4"> · </span>
|
||||
<span class="text-ink font-medium">Deutsche Telekom</span><span class="text-ink-4"> · </span>
|
||||
<span class="text-ink font-medium">Volkswagen AG</span><span class="text-ink-4"> · </span>
|
||||
<span class="text-ink font-medium">Allianz SE</span><span class="text-ink-4"> · </span>
|
||||
<span class="text-ink font-medium">Deutsche Bank</span><span class="text-ink-4"> · </span>
|
||||
<span class="text-ink font-medium">RWE</span><span class="text-ink-4"> · </span>
|
||||
<span class="text-ink font-medium">OMV</span><span class="text-ink-4"> · </span>
|
||||
<span class="text-ink font-medium">Voestalpine</span><span class="text-ink-4"> · </span>
|
||||
<span class="text-ink font-medium">Roche</span>
|
||||
<span class="text-ink-3"> — und 187 weitere veröffentlichende Unternehmen im laufenden Monat.</span>
|
||||
</p>
|
||||
<a href="#" class="text-[12px] text-brand font-medium border-b border-brand pb-px flex-shrink-0">Alle Newsrooms →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============== TRUST — vier Prinzipien ============== -->
|
||||
<section class="bg-bg" style="border-top:1px solid #1C1A17;">
|
||||
<div class="max-w-layout mx-auto px-8 py-14">
|
||||
<header class="grid items-end" style="grid-template-columns:auto 1fr auto; gap:32px;">
|
||||
<div class="flex flex-col gap-3.5">
|
||||
<span class="font-mono text-[11px] text-ink-4" style="letter-spacing:0.1em;">§ 01</span>
|
||||
<div>
|
||||
<div class="eyebrow text-[10.5px] mb-2.5">Was uns ausmacht</div>
|
||||
<h2 class="font-serif m-0 text-[36px] font-semibold leading-[1.1] text-ink max-w-[720px]" style="letter-spacing:-0.6px;text-wrap:balance;">Vier Prinzipien, die diese Plattform tragen</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-4 mt-9" style="border-top:1px solid #1C1A17;">
|
||||
<div class="py-7 pr-6 border-r border-bg-rule">
|
||||
<div class="eyebrow muted text-[10px] mb-3.5">Qualität</div>
|
||||
<h3 class="font-serif m-0 text-[22px] leading-[1.2] font-semibold" style="letter-spacing:-0.3px;">Geprüfte Mitteilungen</h3>
|
||||
<p class="mt-3.5 mb-0 text-[14px] leading-[1.55] text-ink-2">Jede Mitteilung durchläuft eine Qualitätsprüfung, bevor sie online geht. Keine SEO-Spam-Texte, keine reinen Werbeanzeigen.</p>
|
||||
</div>
|
||||
<div class="py-7 px-6 border-r border-bg-rule">
|
||||
<div class="eyebrow muted text-[10px] mb-3.5">Auffindbarkeit</div>
|
||||
<h3 class="font-serif m-0 text-[22px] leading-[1.2] font-semibold" style="letter-spacing:-0.3px;">Dauerhaft im Archiv</h3>
|
||||
<p class="mt-3.5 mb-0 text-[14px] leading-[1.55] text-ink-2">Pressemitteilungen bleiben im Archiv – auch nach Jahren. Über 100.000 Mitteilungen aus mehr als einem Jahrzehnt sind weiterhin abrufbar.</p>
|
||||
</div>
|
||||
<div class="py-7 px-6 border-r border-bg-rule">
|
||||
<div class="eyebrow muted text-[10px] mb-3.5">Konditionen</div>
|
||||
<h3 class="font-serif m-0 text-[22px] leading-[1.2] font-semibold" style="letter-spacing:-0.3px;">Faire Preise, keine Bindung</h3>
|
||||
<p class="mt-3.5 mb-0 text-[14px] leading-[1.55] text-ink-2">Transparente Preise, kein Abo-Zwang, keine Vertragsfallen. Sie zahlen, was Sie einreichen.</p>
|
||||
</div>
|
||||
<div class="py-7 pl-6">
|
||||
<div class="eyebrow muted text-[10px] mb-3.5">Umgang mit Fehlern</div>
|
||||
<h3 class="font-serif m-0 text-[22px] leading-[1.2] font-semibold" style="letter-spacing:-0.3px;">Korrektur statt Löschung</h3>
|
||||
<p class="mt-3.5 mb-0 text-[14px] leading-[1.55] text-ink-2">Fehler in einer Mitteilung? Wir korrigieren statt zu löschen – damit Verweise und Verlinkungen bestehen bleiben.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============== ABLAUF ============== -->
|
||||
<section id="ablauf" class="bg-bg-elev border-t border-bg-rule">
|
||||
<div class="max-w-layout mx-auto px-8 py-16">
|
||||
<header class="grid items-end" style="grid-template-columns:auto 1fr auto; gap:32px;">
|
||||
<div class="flex flex-col gap-3.5">
|
||||
<span class="font-mono text-[11px] text-ink-4" style="letter-spacing:0.1em;">§ 02</span>
|
||||
<div>
|
||||
<div class="eyebrow text-[10.5px] mb-2.5">Ablauf</div>
|
||||
<h2 class="font-serif m-0 text-[36px] font-semibold leading-[1.1] text-ink max-w-[720px]" style="letter-spacing:-0.6px;text-wrap:balance;">So funktioniert's — drei Schritte</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="text-[12.5px] text-ink-3 max-w-[280px] text-right leading-[1.55]">Keine Magic-Sprache. Was hier passiert, passiert sichtbar.</div>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-3 mt-10" style="gap:1px;background:#E5E0D5;border-top:1px solid #1C1A17;border-bottom:1px solid #1C1A17;">
|
||||
<div class="bg-bg-elev px-7 pt-8 pb-9">
|
||||
<div class="flex items-baseline justify-between mb-[22px]">
|
||||
<span class="font-mono text-[13px] text-brand font-semibold">01</span>
|
||||
<span class="eyebrow muted text-[10px]">≈ 2 Minuten</span>
|
||||
</div>
|
||||
<h3 class="font-serif m-0 text-[24px] leading-[1.2] font-semibold" style="letter-spacing:-0.3px;">Konto anlegen</h3>
|
||||
<p class="mt-3.5 mb-0 text-[14px] leading-[1.6] text-ink-2">Mit E-Mail-Adresse. Kein Passwort nötig — Login per Magic-Link. Konto und Abrechnung liegen im zentralen Publisher-Bereich.</p>
|
||||
</div>
|
||||
<div class="bg-bg-elev px-7 pt-8 pb-9">
|
||||
<div class="flex items-baseline justify-between mb-[22px]">
|
||||
<span class="font-mono text-[13px] text-brand font-semibold">02</span>
|
||||
<span class="eyebrow muted text-[10px]">üblich werktags · innerhalb 24 h</span>
|
||||
</div>
|
||||
<h3 class="font-serif m-0 text-[24px] leading-[1.2] font-semibold" style="letter-spacing:-0.3px;">Mitteilung einreichen</h3>
|
||||
<p class="mt-3.5 mb-0 text-[14px] leading-[1.6] text-ink-2">Text, Bild, Ansprechpartner. Eine automatische Qualitätsprüfung läuft parallel zu einer kurzen redaktionellen Sichtung.</p>
|
||||
</div>
|
||||
<div class="bg-bg-elev px-7 pt-8 pb-9">
|
||||
<div class="flex items-baseline justify-between mb-[22px]">
|
||||
<span class="font-mono text-[13px] text-brand font-semibold">03</span>
|
||||
<span class="eyebrow muted text-[10px]">permanent · indexiert</span>
|
||||
</div>
|
||||
<h3 class="font-serif m-0 text-[24px] leading-[1.2] font-semibold" style="letter-spacing:-0.3px;">Veröffentlichung</h3>
|
||||
<p class="mt-3.5 mb-0 text-[14px] leading-[1.6] text-ink-2">Nach Freigabe online und im Archiv. Bei Bedarf jederzeit korrigierbar — die URL bleibt stabil, Verweise und Verlinkungen bestehen weiter.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-4.5 mb-0 text-[12px] text-ink-3" style="margin-top:18px;">
|
||||
Die Veröffentlichung erfolgt über den zentralen Publisher-Bereich auf
|
||||
<a href="#" class="text-brand font-medium border-b border-brand">presseportale.com</a>.
|
||||
Cross-Publishing nach presseecho.de ist optional verfügbar.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============== ANLÄSSE ============== -->
|
||||
<section class="bg-bg border-t border-bg-rule">
|
||||
<div class="max-w-layout mx-auto px-8 py-16">
|
||||
<header class="grid items-end" style="grid-template-columns:auto 1fr auto; gap:32px;">
|
||||
<div class="flex flex-col gap-3.5">
|
||||
<span class="font-mono text-[11px] text-ink-4" style="letter-spacing:0.1em;">§ 03</span>
|
||||
<div>
|
||||
<div class="eyebrow text-[10.5px] mb-2.5">Für wen</div>
|
||||
<h2 class="font-serif m-0 text-[36px] font-semibold leading-[1.1] text-ink max-w-[720px]" style="letter-spacing:-0.6px;text-wrap:balance;">Typische Anlässe einer Veröffentlichung</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="text-[12.5px] text-ink-3 max-w-[280px] text-right leading-[1.55]">Anhaltspunkt für die Eignung. Eine Aufzählung, keine Liste der Möglichkeiten.</div>
|
||||
</header>
|
||||
|
||||
<div class="grid mt-10 items-start" style="grid-template-columns:1.05fr 1fr; gap:64px;">
|
||||
<!-- Anlässe-Liste -->
|
||||
<ol class="list-none p-0 m-0">
|
||||
<li class="grid items-start gap-4 py-[18px] border-t border-bg-rule-strong border-b border-bg-rule" style="grid-template-columns:44px 1fr;">
|
||||
<span class="font-mono text-[12px] text-ink-4 pt-1">01</span>
|
||||
<div>
|
||||
<div class="font-serif text-[18px] font-semibold leading-[1.25] text-ink" style="letter-spacing:-0.2px;">Neue Produkte oder Dienstleistungen</div>
|
||||
<div class="mt-1.5 text-[13px] text-ink-3 leading-[1.5]">Markteinführungen, Produktupdates, neue Services.</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid items-start gap-4 py-[18px] border-b border-bg-rule" style="grid-template-columns:44px 1fr;">
|
||||
<span class="font-mono text-[12px] text-ink-4 pt-1">02</span>
|
||||
<div>
|
||||
<div class="font-serif text-[18px] font-semibold leading-[1.25] text-ink" style="letter-spacing:-0.2px;">Personalien und Geschäftsleitungs-Wechsel</div>
|
||||
<div class="mt-1.5 text-[13px] text-ink-3 leading-[1.5]">Berufungen, Bestellungen, Verabschiedungen.</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid items-start gap-4 py-[18px] border-b border-bg-rule" style="grid-template-columns:44px 1fr;">
|
||||
<span class="font-mono text-[12px] text-ink-4 pt-1">03</span>
|
||||
<div>
|
||||
<div class="font-serif text-[18px] font-semibold leading-[1.25] text-ink" style="letter-spacing:-0.2px;">Auszeichnungen und Zertifizierungen</div>
|
||||
<div class="mt-1.5 text-[13px] text-ink-3 leading-[1.5]">Awards, ISO- und Branchen-Zertifikate, Audits.</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid items-start gap-4 py-[18px] border-b border-bg-rule" style="grid-template-columns:44px 1fr;">
|
||||
<span class="font-mono text-[12px] text-ink-4 pt-1">04</span>
|
||||
<div>
|
||||
<div class="font-serif text-[18px] font-semibold leading-[1.25] text-ink" style="letter-spacing:-0.2px;">Standort-Eröffnungen, Expansionen, Aufträge</div>
|
||||
<div class="mt-1.5 text-[13px] text-ink-3 leading-[1.5]">Werke, Niederlassungen, Großaufträge, Investitionen.</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid items-start gap-4 py-[18px] border-b border-bg-rule" style="grid-template-columns:44px 1fr;">
|
||||
<span class="font-mono text-[12px] text-ink-4 pt-1">05</span>
|
||||
<div>
|
||||
<div class="font-serif text-[18px] font-semibold leading-[1.25] text-ink" style="letter-spacing:-0.2px;">Veranstaltungs-Ankündigungen</div>
|
||||
<div class="mt-1.5 text-[13px] text-ink-3 leading-[1.5]">Tage der offenen Tür, Fachtage, Hauptversammlungen.</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid items-start gap-4 py-[18px] border-b border-bg-rule" style="grid-template-columns:44px 1fr;">
|
||||
<span class="font-mono text-[12px] text-ink-4 pt-1">06</span>
|
||||
<div>
|
||||
<div class="font-serif text-[18px] font-semibold leading-[1.25] text-ink" style="letter-spacing:-0.2px;">Studien und Marktanalysen</div>
|
||||
<div class="mt-1.5 text-[13px] text-ink-3 leading-[1.5]">Eigene Erhebungen, Trendberichte, Branchenkennzahlen.</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<!-- Abgrenzung -->
|
||||
<aside class="border border-bg-rule" style="padding:28px 30px 32px;background:#FBF6EF;border-left:3px solid #C84A1E;">
|
||||
<div class="eyebrow text-[10.5px] mb-3.5">Wichtig zur Eingrenzung</div>
|
||||
<h3 class="font-serif m-0 text-[22px] leading-[1.25] font-semibold" style="letter-spacing:-0.3px;">
|
||||
Nicht geeignet sind reine Werbeanzeigen, SEO-Linkbuilding-Texte oder Inhalte ohne nachvollziehbaren Pressewert.
|
||||
</h3>
|
||||
<p class="mt-4.5 mb-0 text-[13.5px] leading-[1.6] text-ink-2" style="margin-top:18px;">
|
||||
Die redaktionelle Sichtung soll den Charakter der Plattform sichern. Mitteilungen, die diese Schwelle nicht erreichen, werden mit einer kurzen Begründung zurückgegeben — meist mit einem konkreten Korrekturvorschlag.
|
||||
</p>
|
||||
<hr class="rule" style="margin:22px 0 16px;" />
|
||||
<div class="grid gap-2.5 text-[13px] text-ink-2">
|
||||
<div class="flex items-start gap-2.5">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" class="mt-[3px] flex-shrink-0"><path d="M3 7l3 3 5-6" stroke="#2E8540" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span class="text-ink">Mitteilungen mit klarem Anlass und Quelle</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2.5">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" class="mt-[3px] flex-shrink-0"><path d="M3 7l3 3 5-6" stroke="#2E8540" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span class="text-ink">Ansprechpartner mit Funktion und Kontakt</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2.5">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" class="mt-[3px] flex-shrink-0"><path d="M3.5 3.5l7 7M10.5 3.5l-7 7" stroke="#6E6862" stroke-width="1.6" stroke-linecap="round"/></svg>
|
||||
<span class="text-ink-3">Reine Verkaufs- und Rabatt-Texte</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2.5">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" class="mt-[3px] flex-shrink-0"><path d="M3.5 3.5l7 7M10.5 3.5l-7 7" stroke="#6E6862" stroke-width="1.6" stroke-linecap="round"/></svg>
|
||||
<span class="text-ink-3">Anonyme oder Quellen-lose Inhalte</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============== PREISE ============== -->
|
||||
<section class="bg-bg-elev border-t border-bg-rule">
|
||||
<div class="max-w-layout mx-auto px-8 py-14">
|
||||
<header class="grid items-end" style="grid-template-columns:auto 1fr auto; gap:32px;">
|
||||
<div class="flex flex-col gap-3.5">
|
||||
<span class="font-mono text-[11px] text-ink-4" style="letter-spacing:0.1em;">§ 04</span>
|
||||
<div>
|
||||
<div class="eyebrow text-[10.5px] mb-2.5">Preise</div>
|
||||
<h2 class="font-serif m-0 text-[36px] font-semibold leading-[1.1] text-ink max-w-[720px]" style="letter-spacing:-0.6px;text-wrap:balance;">Sie zahlen, was Sie einreichen.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</header>
|
||||
|
||||
<div class="grid mt-9" style="grid-template-columns:1.3fr 1fr 1fr; border-top:1px solid #1C1A17; border-bottom:1px solid #1C1A17;">
|
||||
<!-- Logik -->
|
||||
<div class="pr-8 pt-7 pb-8 border-r border-bg-rule" style="padding-right:32px;">
|
||||
<div class="eyebrow muted text-[10px] mb-3">Logik</div>
|
||||
<p class="font-serif m-0 text-[19px] leading-[1.5] text-ink" style="letter-spacing:-0.1px;">
|
||||
Sie kaufen Credits, die für Veröffentlichungen eingesetzt werden. Keine Mindestlaufzeit, keine versteckten Gebühren.
|
||||
</p>
|
||||
<ul class="list-none p-0 mt-5 text-[13px] text-ink-2 grid gap-2.5">
|
||||
<li class="flex items-start gap-2.5"><span class="w-1.5 h-px bg-brand mt-2.5 flex-shrink-0"></span><span>Credits verfallen nicht.</span></li>
|
||||
<li class="flex items-start gap-2.5"><span class="w-1.5 h-px bg-brand mt-2.5 flex-shrink-0"></span><span>Korrekturen sind kostenfrei.</span></li>
|
||||
<li class="flex items-start gap-2.5"><span class="w-1.5 h-px bg-brand mt-2.5 flex-shrink-0"></span><span>Mengenrabatte ab dem zweiten Paket.</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Anker -->
|
||||
<div class="px-8 pt-7 pb-8 border-r border-bg-rule flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="eyebrow muted text-[10px] mb-3">Anker</div>
|
||||
<div class="font-serif text-[16px] leading-[1.4] text-ink-2">Eine Veröffentlichung</div>
|
||||
<div class="mt-2 flex items-baseline gap-2">
|
||||
<span class="font-serif text-[48px] font-semibold leading-none text-ink" style="letter-spacing:-1.5px;">ab 89 €</span>
|
||||
</div>
|
||||
<div class="mt-2.5 text-[12px] text-ink-3">netto · zzgl. USt. · Mengenrabatte verfügbar.</div>
|
||||
</div>
|
||||
<div class="mt-5 text-[11.5px] text-ink-3 leading-[1.5]">Beispiel-Pakete: 5er ab 79 € / Mitteilung · 25er ab 64 € / Mitteilung.</div>
|
||||
</div>
|
||||
<!-- Hub-Verweis -->
|
||||
<div class="pl-8 pt-7 pb-8 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="eyebrow muted text-[10px] mb-3">Vollständige Übersicht</div>
|
||||
<p class="m-0 text-[14px] leading-[1.6] text-ink-2">Pakete, Cross-Publishing nach presseecho.de, Agentur-Konditionen und Rechnungseinstellungen finden Sie im zentralen Publisher-Bereich.</p>
|
||||
</div>
|
||||
<a href="#" class="mt-5 inline-flex items-center gap-2 text-[13.5px] font-semibold text-brand border-b border-brand self-start pb-0.5">
|
||||
Preisübersicht im Publisher-Bereich
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 6h6M6 3l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============== FAQ ============== -->
|
||||
<section class="bg-bg border-t border-bg-rule">
|
||||
<div class="max-w-layout mx-auto px-8 py-16">
|
||||
<header class="grid items-end" style="grid-template-columns:auto 1fr auto; gap:32px;">
|
||||
<div class="flex flex-col gap-3.5">
|
||||
<span class="font-mono text-[11px] text-ink-4" style="letter-spacing:0.1em;">§ 05</span>
|
||||
<div>
|
||||
<div class="eyebrow text-[10.5px] mb-2.5">Häufige Fragen</div>
|
||||
<h2 class="font-serif m-0 text-[36px] font-semibold leading-[1.1] text-ink max-w-[720px]" style="letter-spacing:-0.6px;text-wrap:balance;">Kurz beantwortet</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="text-[12.5px] text-ink-3 max-w-[280px] text-right leading-[1.55]">Eine ausführliche Wissensdatenbank liegt im Publisher-Bereich.</div>
|
||||
</header>
|
||||
|
||||
<div class="grid mt-9 items-start" style="grid-template-columns:1fr 1.6fr; gap:64px;">
|
||||
<div class="sticky top-6 pt-2">
|
||||
<p class="font-serif m-0 text-[16px] leading-[1.55] text-ink-2">Sie finden hier keine Antwort?</p>
|
||||
<a href="#" class="mt-3.5 inline-flex items-center gap-1.5 text-[13.5px] font-medium text-brand border-b border-brand pb-0.5">Redaktion direkt anschreiben</a>
|
||||
<div class="mt-3.5 text-[12px] text-ink-3 leading-[1.55]"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55273031343e213c3a3b153720263c3b302626253a2721343967617b363a38">[email protected]</a><br />Mo–Fr · 09:00–17:00 Uhr (MEZ)</div>
|
||||
</div>
|
||||
|
||||
<div style="border-top:1px solid #1C1A17;">
|
||||
<details open class="border-b border-bg-rule">
|
||||
<summary class="grid items-center py-5.5 gap-4" style="grid-template-columns:44px 1fr 24px; padding:22px 0;">
|
||||
<span class="font-mono text-[12px] text-ink-4">01</span>
|
||||
<span class="font-serif text-[19px] font-semibold text-ink leading-[1.3]" style="letter-spacing:-0.2px;">Wie schnell wird meine Mitteilung veröffentlicht?</span>
|
||||
<span class="faq-plus inline-flex items-center justify-center w-[22px] h-[22px] border border-bg-rule-strong text-[14px] text-ink font-medium"></span>
|
||||
</summary>
|
||||
<div class="text-[14px] leading-[1.6] text-ink-2 max-w-[640px]" style="padding:0 0 22px 60px;">Werktags üblicherweise innerhalb von 24 Stunden nach Einreichung. Bei zeitkritischen Mitteilungen ist eine vorab-Absprache möglich.</div>
|
||||
</details>
|
||||
<details class="border-b border-bg-rule">
|
||||
<summary class="grid items-center gap-4" style="grid-template-columns:44px 1fr 24px; padding:22px 0;">
|
||||
<span class="font-mono text-[12px] text-ink-4">02</span>
|
||||
<span class="font-serif text-[19px] font-semibold text-ink leading-[1.3]" style="letter-spacing:-0.2px;">Bleibt meine Mitteilung dauerhaft online?</span>
|
||||
<span class="faq-plus inline-flex items-center justify-center w-[22px] h-[22px] border border-bg-rule-strong text-[14px] text-ink font-medium"></span>
|
||||
</summary>
|
||||
<div class="text-[14px] leading-[1.6] text-ink-2 max-w-[640px]" style="padding:0 0 22px 60px;">Ja. Mitteilungen werden nicht gelöscht. Korrekturen sind jederzeit möglich — die URL bleibt erhalten.</div>
|
||||
</details>
|
||||
<details class="border-b border-bg-rule">
|
||||
<summary class="grid items-center gap-4" style="grid-template-columns:44px 1fr 24px; padding:22px 0;">
|
||||
<span class="font-mono text-[12px] text-ink-4">03</span>
|
||||
<span class="font-serif text-[19px] font-semibold text-ink leading-[1.3]" style="letter-spacing:-0.2px;">Kann ich auch auf presseecho.de veröffentlichen?</span>
|
||||
<span class="faq-plus inline-flex items-center justify-center w-[22px] h-[22px] border border-bg-rule-strong text-[14px] text-ink font-medium"></span>
|
||||
</summary>
|
||||
<div class="text-[14px] leading-[1.6] text-ink-2 max-w-[640px]" style="padding:0 0 22px 60px;">Ja, über den zentralen Publisher-Bereich. Cross-Publishing ist optional verfügbar und wird separat abgerechnet.</div>
|
||||
</details>
|
||||
<details class="border-b border-bg-rule">
|
||||
<summary class="grid items-center gap-4" style="grid-template-columns:44px 1fr 24px; padding:22px 0;">
|
||||
<span class="font-mono text-[12px] text-ink-4">04</span>
|
||||
<span class="font-serif text-[19px] font-semibold text-ink leading-[1.3]" style="letter-spacing:-0.2px;">Brauche ich ein Abo?</span>
|
||||
<span class="faq-plus inline-flex items-center justify-center w-[22px] h-[22px] border border-bg-rule-strong text-[14px] text-ink font-medium"></span>
|
||||
</summary>
|
||||
<div class="text-[14px] leading-[1.6] text-ink-2 max-w-[640px]" style="padding:0 0 22px 60px;">Nein. Sie kaufen Credits nach Bedarf, ohne Vertragsbindung. Nicht eingesetzte Credits verfallen nicht.</div>
|
||||
</details>
|
||||
<details class="border-b border-bg-rule">
|
||||
<summary class="grid items-center gap-4" style="grid-template-columns:44px 1fr 24px; padding:22px 0;">
|
||||
<span class="font-mono text-[12px] text-ink-4">05</span>
|
||||
<span class="font-serif text-[19px] font-semibold text-ink leading-[1.3]" style="letter-spacing:-0.2px;">Was passiert bei einem Fehler in der Mitteilung?</span>
|
||||
<span class="faq-plus inline-flex items-center justify-center w-[22px] h-[22px] border border-bg-rule-strong text-[14px] text-ink font-medium"></span>
|
||||
</summary>
|
||||
<div class="text-[14px] leading-[1.6] text-ink-2 max-w-[640px]" style="padding:0 0 22px 60px;">Korrektur statt Löschung: Inhalte werden aktualisiert, die URL bleibt erhalten, Verlinkungen und Verweise bestehen weiter.</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============== FINAL CTA ============== -->
|
||||
<section class="bg-bg" style="border-top:1px solid #1C1A17;">
|
||||
<div class="max-w-layout mx-auto px-8 pt-14 pb-[72px]">
|
||||
<div class="relative overflow-hidden grid items-end text-ink-on-dark" style="background:#1A1F26;padding:56px 56px 60px;grid-template-columns:1.3fr 1fr;gap:56px;">
|
||||
<span class="absolute left-0 top-0 bottom-0 w-1 bg-brand"></span>
|
||||
<div>
|
||||
<div class="eyebrow mb-3.5 text-[10.5px]" style="color:#FF8B6F;">Mitteilung einreichen · Schritt eins</div>
|
||||
<h2 class="font-serif m-0 text-[48px] font-semibold leading-[1.08] text-ink-on-dark max-w-[700px]" style="letter-spacing:-0.9px;text-wrap:balance;">Bereit, Ihre Mitteilung einzureichen?</h2>
|
||||
<p class="font-serif mt-5.5 mb-0 text-[17px] leading-[1.55] text-ink-on-dark-2 max-w-[580px]" style="margin-top:22px;">
|
||||
Konto in zwei Minuten anlegen, Text und Bild einreichen, nach redaktioneller Sichtung veröffentlicht. Einmaliges Konto — beide Portale (businessportal24 & presseecho.de) nutzbar.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-start gap-3.5">
|
||||
<button class="inline-flex items-center gap-2 px-7 py-4 text-[15px] font-semibold text-white bg-brand hover:bg-brand-deep">
|
||||
Zum Publisher-Bereich
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="ml-0.5"><path d="M4 8L8.5 3.5M8.5 3.5H5M8.5 3.5V7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<span class="text-[12px] text-ink-on-dark-2">Einreichung läuft über presseportale.com · Login per Magic-Link</span>
|
||||
<a href="#" class="mt-1.5 text-[13px] text-ink-on-dark border-b pb-0.5" style="border-color:rgba(255,255,255,0.35);">Oder zuerst Beispiele ansehen →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- ============== FOOTER ============== -->
|
||||
<footer class="bg-bg-footer text-ink-on-dark border-t border-black">
|
||||
<div class="max-w-layout mx-auto px-8 pt-11 pb-7">
|
||||
<div class="grid pb-7" style="grid-template-columns:1.5fr 1fr 1fr 1fr;gap:56px;border-bottom:1px solid rgba(255,255,255,0.08);">
|
||||
<div>
|
||||
<div class="font-serif text-[22px] font-semibold" style="letter-spacing:-0.4px;">businessportal<span class="text-brand">24</span></div>
|
||||
<p class="mt-3 text-[12.5px] text-ink-on-dark-2 leading-[1.6] max-w-[380px]">businessportal24 ist ein Service der Presseportale-Gruppe. Plattform für Pressemitteilungen mittelständischer Unternehmen, Selbstständiger und PR-Agenturen im deutschsprachigen Raum.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="eyebrow mb-3.5 text-[10px]" style="color:rgba(255,255,255,0.5);">Einreichen</div>
|
||||
<ul class="list-none p-0 m-0 grid gap-2.5">
|
||||
<li><a href="#" class="text-[13px] text-ink-on-dark">Mitteilung einreichen</a></li>
|
||||
<li><a href="#" class="text-[13px] text-ink-on-dark">Ablauf</a></li>
|
||||
<li><a href="#" class="text-[13px] text-ink-on-dark">Preise</a></li>
|
||||
<li><a href="#" class="text-[13px] text-ink-on-dark">Beispiele</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div class="eyebrow mb-3.5 text-[10px]" style="color:rgba(255,255,255,0.5);">Plattform</div>
|
||||
<ul class="list-none p-0 m-0 grid gap-2.5">
|
||||
<li><a href="#" class="text-[13px] text-ink-on-dark">Startseite</a></li>
|
||||
<li><a href="#" class="text-[13px] text-ink-on-dark">Branchen</a></li>
|
||||
<li><a href="#" class="text-[13px] text-ink-on-dark">Newsletter</a></li>
|
||||
<li><a href="#" class="text-[13px] text-ink-on-dark">RSS / API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div class="eyebrow mb-3.5 text-[10px]" style="color:rgba(255,255,255,0.5);">Unternehmen</div>
|
||||
<ul class="list-none p-0 m-0 grid gap-2.5">
|
||||
<li><a href="#" class="text-[13px] text-ink-on-dark">Über uns</a></li>
|
||||
<li><a href="#" class="text-[13px] text-ink-on-dark">Impressum</a></li>
|
||||
<li><a href="#" class="text-[13px] text-ink-on-dark">Datenschutz</a></li>
|
||||
<li><a href="#" class="text-[13px] text-ink-on-dark">AGB</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5.5 flex justify-between items-center flex-wrap gap-4 text-[12px] text-ink-on-dark-2" style="margin-top:22px;">
|
||||
<div>© 2026 Presseportale-Gruppe · Alle Rechte vorbehalten</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-ink-on-dark-2">Für fachlich-spezifische Themen:</span>
|
||||
<a href="#" class="text-ink-on-dark border-b pb-px" style="border-color:rgba(255,255,255,0.3);">presseecho.de →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue