presseportale/dev/frontend/tailwind_v3/presseecho_startseite-tailwind.html
Kevin Adametz 253141c6dc Frontend: Editorial-Relaunch der öffentlichen Strecke + Ausgaben-Routing
Öffentliche Seiten auf gemeinsames Editorial-Design (x-web.site-header/-footer,
Design-Tokens) und Ausgaben-Präfix /{edition}/ (de|en) umgestellt.

- Routing: neue Middleware SetEdition (Locale + URL::defaults), /{edition}-Gruppe
  in routes/web.php, Root-Redirect auf /de, 301 für Legacy-.html-URLs,
  Baseline-Default in AppServiceProvider.
- Neue URL-Schemata: /{edition}/press-release/{slug}, /{edition}/category/{slug}.
- Ausgabe = Sprache: DE/EN-Umschalter (Region/CH/AT entfernt); EditorialClock
  und Livewire-Komponenten sprachdynamisch.
- Detail-, Kategorie- und Veröffentlichen-Seite mit echten Daten neu aufgebaut.
- Suche aktiviert: Volt-Komponente livewire/web/search (Titel/Text/Keywords +
  Firma + Rubrik, Filter, Sortierung, Pagination, URL-Parameter q/category/sort).
- Rubriken-Navigation statt Übersichtsseite: Helper CategoryNavigation;
  web/kategorien.blade.php + Route entfernt (Legacy-301).
- Tests: Edition-Routing, Kategorie-Seite/-Navigation, Detail, Veröffentlichen,
  Suche, EditorialClock. Doku in "Echte öffentliche Unterseiten.md" aktualisiert.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-16 16:39:28 +00:00

1307 lines
71 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>presseecho.de — Startseite (DE)</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 + Brand-Konfiguration presseecho -->
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
/* Surfaces — warmes Buchpapier */
bg: "#F5F3EC",
"bg-elev": "#FBFAF4",
"bg-rule": "#DDD7C8",
"bg-rule-strong": "#1A1F1C",
"bg-card-warm": "#EDE8DA",
"bg-card-warm-border": "#CFC7B0",
/* Brand surfaces — tiefgrün */
"brand-deep": "#1F4D3A",
"brand-deep2": "#2A5E48",
"brand-soft": "#E4ECE7",
"brand-soft2": "#D1DED7",
accent: "#1F4D3A",
"accent-2": "#4A6B5A",
"accent-ink": "#F5F3EC",
/* Hub bleibt konstant über beide Brands */
"hub-bg": "#1A2540",
"hub-bg-2": "#243152",
/* Ink */
ink: "#1A1F1C",
"ink-2": "#3A413D",
"ink-3": "#5A6360",
"ink-4": "#8A918D",
"ink-on-dark": "#F5F3EC",
"ink-on-dark-2": "#B2B9B4",
/* Status (sparingly) */
ok: "#2E8540",
archive: "#7A5C3E", /* sepia für Archiv-Marker */
},
fontFamily: {
sans: ['"Inter Tight"','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: {
"accent-grad": "linear-gradient(135deg,#1F4D3A 0%,#163A2C 100%)",
"hub-grad": "linear-gradient(135deg,#1A2540 0%,#243152 100%)",
"feature-grad": "linear-gradient(135deg,#2D5746,#1A3B2C)",
"hero-grad": "linear-gradient(135deg,#2A4A3A,#15281F)",
}
}
}
};
</script>
<style>
html,body { margin:0; padding:0; }
body { background:#E8E2D2; font-family:"Inter Tight",system-ui,sans-serif; }
/* Editorial helpers — sperrgesetzte Versalien für „IM KONTEXT", „AUS DEM ARCHIV" */
.eyebrow {
font-size: 11px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: #1F4D3A;
}
.eyebrow.muted { color:#5A6360; letter-spacing: 0.16em; font-weight:600; font-size:10.5px; }
.pe-cat {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color:#1F4D3A;
}
.pe-tag {
display:inline-flex; align-items:center;
padding: 3px 8px; font-size: 10px; font-weight:700;
letter-spacing: 0.12em; text-transform: uppercase;
background:#1F4D3A; color:#F5F3EC; border-radius:2px;
}
/* Sektion-Header-Linie unter dem Eyebrow */
.section-eyebrow {
display:inline-flex; align-items:center; gap:10px;
font-size: 11px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color:#1F4D3A;
}
.section-eyebrow::after {
content:""; display:block; width:42px; height:1px;
background:#1F4D3A; opacity:.5;
}
.rule-strong { height:1px; background:#1A1F1C; border:0; margin:0; }
.rule { height:1px; background:#DDD7C8; border:0; margin:0; }
.rule-accent { height:2px; background:#1F4D3A; border:0; margin:0; }
/* Archiv-Sepia-Bild */
.sepia-img { filter: sepia(0.5) saturate(0.7) brightness(0.95); }
</style>
</head>
<body class="bg-bg text-ink font-sans antialiased">
<!-- ===================================================================
ROOT — 1280px Artboard
=================================================================== -->
<div class="mx-auto bg-bg" style="width:1280px;">
<!-- ============== TOP UTILITY BAR ============== -->
<!-- Statt Wirtschafts-Ticker: editoriale Identitäts-Leiste -->
<div class="bg-accent-grad text-ink-on-dark-2 border-b border-black/50">
<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.5 whitespace-nowrap border-r border-white/10">
Mittwoch, 13. Mai 2026 · KW 20
</span>
<span class="flex items-center px-3.5 text-[9.5px] uppercase font-semibold tracking-[0.18em] text-white/45 whitespace-nowrap">
Ausgabe
</span>
<button class="flex items-center gap-1.5 px-2.5 py-2.5 text-[11.5px] font-semibold text-white bg-white/[0.08] border-b-2 border-white -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.5 text-[11.5px] font-medium text-white/60 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.5 text-[11.5px] font-medium text-white/60 border-b-2 border-transparent -mb-px whitespace-nowrap">
<span class="text-[12px] leading-none">🇨🇭</span><span>CH</span>
</button>
<span class="flex-1"></span>
<!-- IDENTITÄTS-SIGNAL: Archiv-Tiefe -->
<span class="flex items-center gap-2.5 py-2.5 whitespace-nowrap text-white/70">
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" class="opacity-60">
<rect x="2" y="3" width="12" height="3" stroke="currentColor" stroke-width="1.2" />
<rect x="2" y="7" width="12" height="3" stroke="currentColor" stroke-width="1.2" />
<rect x="2" y="11" width="12" height="3" stroke="currentColor" stroke-width="1.2" />
</svg>
<span>Pressearchiv seit 2012 · <strong class="font-semibold text-white font-mono">100.247</strong> Mitteilungen</span>
</span>
<span class="w-px h-[14px] bg-white/15 mx-5 self-center"></span>
<span class="flex items-center gap-4 py-2.5 whitespace-nowrap text-white/65">
<a href="#" class="hover:text-white">Newsletter</a>
<a href="#" class="hover:text-white">RSS</a>
<a href="#" class="hover:text-white">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-[20px] 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]">
presseecho<span class="text-accent">.de</span>
</div>
<div class="eyebrow muted mt-1.5 text-[9.5px] tracking-[0.22em]">
Branchen-Presse · Archiv
</div>
</div>
<!-- Suchfeld mit Archiv-Sprache -->
<div class="w-full max-w-[500px]">
<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">Themen, Branchen, Mitteilungen durchsuchen…</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 gap-3.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">
Themen-Recherche
</button>
<button class="inline-flex items-center gap-1.5 text-[11.5px] text-ink-3 underline underline-offset-2 decoration-bg-rule-strong/40">
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-accent hover:bg-brand-deep2 rounded-[2px] transition-colors">
Veröffentlichen
<svg width="11" height="11" viewBox="0 0 12 12" fill="none">
<path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</header>
<!-- ============== RUBRIKEN-NAV — alphabetisch, mit Counts ============== -->
<nav class="bg-bg border-b border-bg-rule">
<div class="max-w-layout mx-auto px-8 flex items-stretch overflow-hidden">
<a href="#" class="px-3.5 py-2.5 text-[13.5px] font-semibold text-ink border-b-2 border-accent -mb-px">Startseite</a>
<a href="#" class="px-3.5 py-2.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Bildung</a>
<a href="#" class="px-3.5 py-2.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Energie</a>
<a href="#" class="px-3.5 py-2.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Finanzen</a>
<a href="#" class="px-3.5 py-2.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Gesundheit</a>
<a href="#" class="px-3.5 py-2.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Handel</a>
<a href="#" class="px-3.5 py-2.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Industrie</a>
<a href="#" class="px-3.5 py-2.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Medien</a>
<a href="#" class="px-3.5 py-2.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Mobilität</a>
<a href="#" class="px-3.5 py-2.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Technologie</a>
<a href="#" class="px-3.5 py-2.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Tourismus</a>
<a href="#" class="px-3.5 py-2.5 text-[13.5px] font-medium text-ink-3 border-b-2 border-transparent hover:text-ink">Alle Rubriken →</a>
</div>
</nav>
<!-- ============== THEMEN-UPDATE-ZEILE (statisch, KEIN Ticker) ============== -->
<div class="bg-bg-elev border-b border-bg-rule">
<div class="max-w-layout mx-auto px-8 py-2 flex items-center gap-5 text-[12px]">
<span class="inline-flex items-center gap-2 text-accent font-bold text-[10.5px] tracking-[0.18em] flex-shrink-0">
<svg width="11" height="11" viewBox="0 0 12 12" fill="none">
<rect x="1.5" y="2" width="9" height="8" stroke="currentColor" stroke-width="1.2" />
<path d="M3 4.5h6M3 6.5h4M3 8.5h5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
</svg>
DIESE WOCHE
</span>
<span class="text-ink-3">Schwerpunkt-Themen:</span>
<a href="#" class="text-ink hover:text-accent">Energiewende-Monitor</a>
<span class="text-ink-4">·</span>
<a href="#" class="text-ink hover:text-accent">Industrie 5.0 in Bayern</a>
<span class="text-ink-4">·</span>
<a href="#" class="text-ink hover:text-accent">Fachkräfte im Gesundheitssektor</a>
<span class="text-ink-4">·</span>
<a href="#" class="text-ink hover:text-accent">Wasserstoff-Lieferketten</a>
<span class="flex-1"></span>
<a href="#" class="text-ink-3 hover:text-accent inline-flex items-center gap-1">
Alle Themen-Schwerpunkte →
</a>
</div>
</div>
<!-- ============== MAIN ============== -->
<main class="max-w-layout mx-auto px-8 pt-10 pb-12">
<!-- ============== IM KONTEXT — der Hero ============== -->
<!-- Demonstriert das Kern-Versprechen „Themen-Gedächtnis" im ersten sichtbaren Element -->
<section>
<header class="flex items-baseline justify-between mb-5">
<div class="flex items-baseline gap-4">
<span class="section-eyebrow">Im Kontext</span>
<h2 class="font-serif text-[26px] font-semibold m-0 tracking-[-0.3px] text-ink">
Energie &amp; Klima
</h2>
</div>
<div class="text-[11.5px] text-ink-3 font-mono tracking-wide">KW 20 · 2026 · Schwerpunkt seit 9. Mai</div>
</header>
<hr class="rule-accent mb-6" />
<div class="grid gap-9" style="grid-template-columns:1.7fr 1fr;">
<!-- HAUPTMITTEILUNG -->
<article>
<div class="relative">
<div class="relative overflow-hidden bg-hero-grad" style="height:520px;">
<svg width="100%" height="100%" viewBox="0 0 760 520" class="absolute inset-0 opacity-40">
<defs>
<pattern id="pe-pat-0" x="0" y="0" width="48" height="48" patternUnits="userSpaceOnUse">
<circle cx="24" cy="24" r="1" fill="white" opacity="0.35" />
</pattern>
</defs>
<rect width="760" height="520" fill="url(#pe-pat-0)" />
<circle cx="580" cy="170" r="110" fill="white" opacity="0.05" />
<circle cx="180" cy="400" r="70" fill="white" opacity="0.05" />
<!-- Schematische Windrad-Andeutung -->
<g opacity="0.18" stroke="white" stroke-width="1" fill="none">
<line x1="380" y1="200" x2="380" y2="400" />
<path d="M380 200 L420 170 M380 200 L380 160 M380 200 L340 170" />
</g>
</svg>
</div>
<div class="absolute top-6 left-6 flex gap-2">
<span class="pe-tag">Hauptmitteilung</span>
<span class="pe-tag" style="background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.3);color:white;backdrop-filter:blur(4px);">
Im Thema seit 2018
</span>
</div>
<div class="absolute left-0 right-0 bottom-0 px-9 pb-8 pt-[64px] text-white"
style="background:linear-gradient(180deg,transparent,rgba(0,0,0,0.92));">
<div class="eyebrow mb-3" style="color:#9BD5B2;letter-spacing:0.22em;">ENERGIE · WASSERSTOFF</div>
<h1 class="font-serif text-[36px] font-semibold m-0 leading-[1.12] tracking-[-0.6px] max-w-[640px]">
Wasserstoff-Lieferkette Nordsee–Ruhrgebiet: EnBW, RWE und Air Liquide schließen Versorgungspakt
</h1>
<p class="font-serif text-[15px] leading-[1.55] mt-4 max-w-[600px] text-white/85">
Drei Energiekonzerne unterzeichnen Abkommen über bilateralen Wasserstoff-Transit. Im Archiv liegen 47 Mitteilungen, die diesen Pfad seit 2018 dokumentieren.
</p>
<div class="mt-4 flex items-center gap-3.5 text-[11.5px] text-white/65 font-mono">
<span>EnBW Energie Baden-Württemberg AG</span><span>·</span>
<span>11. Mai 2026</span><span>·</span>
<span>6 Min. Lesezeit</span>
</div>
</div>
</div>
</article>
<!-- SIDEBAR — Thema im Verlauf + Verwandte Beiträge -->
<aside>
<!-- THEMA IM VERLAUF -->
<div class="border-t-2 border-accent pt-4 pb-5 border-b border-bg-rule">
<div class="section-eyebrow mb-4">Thema im Verlauf</div>
<!-- Mini-Zeitleiste -->
<ol class="relative ml-3 pl-5 border-l border-bg-rule-strong/20 list-none m-0 p-0 space-y-3.5">
<li class="relative">
<span class="absolute -left-[26px] top-[5px] w-2 h-2 rounded-full bg-bg-rule-strong/30 border border-bg"></span>
<div class="text-[10.5px] font-bold tracking-[0.14em] uppercase text-ink-3 mb-0.5 font-mono">2018 · Mär</div>
<div class="text-[13px] leading-[1.4] text-ink-2">Erste Studie zur H2-Erzeugung in Nordsee-Offshore-Parks (Fraunhofer ISE)</div>
</li>
<li class="relative">
<span class="absolute -left-[26px] top-[5px] w-2 h-2 rounded-full bg-bg-rule-strong/30 border border-bg"></span>
<div class="text-[10.5px] font-bold tracking-[0.14em] uppercase text-ink-3 mb-0.5 font-mono">2021</div>
<div class="text-[13px] leading-[1.4] text-ink-2">Drei Bundesländer beschließen Wasserstoff-Strategie · 8 Mitteilungen</div>
</li>
<li class="relative">
<span class="absolute -left-[26px] top-[5px] w-2 h-2 rounded-full bg-bg-rule-strong/40 border border-bg"></span>
<div class="text-[10.5px] font-bold tracking-[0.14em] uppercase text-ink-3 mb-0.5 font-mono">2024</div>
<div class="text-[13px] leading-[1.4] text-ink-2">EnBW und Air Liquide kündigen Pilotprojekt an · 14 Mitteilungen</div>
</li>
<li class="relative">
<span class="absolute -left-[26px] top-[5px] w-2.5 h-2.5 rounded-full bg-accent border-2 border-bg ring-2 ring-accent/30"></span>
<div class="text-[10.5px] font-bold tracking-[0.14em] uppercase text-accent mb-0.5 font-mono">2026 · Mai</div>
<div class="text-[13.5px] leading-[1.4] text-ink font-medium">Versorgungspakt unterzeichnet · 12 Mitteilungen in dieser Woche</div>
</li>
</ol>
</div>
<!-- VERWANDTE BEITRÄGE -->
<div class="pt-5">
<div class="section-eyebrow mb-3.5">Verwandte Beiträge</div>
<a class="block py-3 border-b border-bg-rule group">
<div class="text-[10.5px] text-ink-3 mb-1 font-mono">14. März 2024</div>
<div class="font-serif text-[14.5px] leading-[1.35] font-medium text-ink group-hover:text-accent">
Pilotanlage Wilhelmshaven: H2-Elektrolyse mit Offshore-Strom geht in Testbetrieb
</div>
<div class="text-[11px] text-ink-3 mt-1.5">EnBW · Karlsruhe</div>
</a>
<a class="block py-3 border-b border-bg-rule group">
<div class="text-[10.5px] text-ink-3 mb-1 font-mono">22. November 2022</div>
<div class="font-serif text-[14.5px] leading-[1.35] font-medium text-ink group-hover:text-accent">
Air Liquide investiert 250 Mio. Euro in Ruhrgebiets-Infrastruktur
</div>
<div class="text-[11px] text-ink-3 mt-1.5">Air Liquide Deutschland</div>
</a>
<a class="block py-3 border-b border-bg-rule group">
<div class="text-[10.5px] text-ink-3 mb-1 font-mono">3. September 2021</div>
<div class="font-serif text-[14.5px] leading-[1.35] font-medium text-ink group-hover:text-accent">
Bundesländer-Allianz für Wasserstoff-Korridor formiert sich
</div>
<div class="text-[11px] text-ink-3 mt-1.5">Bayerisches Staatsministerium</div>
</a>
<a class="block py-3 border-b border-bg-rule group">
<div class="text-[10.5px] text-ink-3 mb-1 font-mono">17. März 2018</div>
<div class="font-serif text-[14.5px] leading-[1.35] font-medium text-ink group-hover:text-accent">
Studie zur H2-Erzeugung in Nordsee-Offshore-Windparks veröffentlicht
</div>
<div class="text-[11px] text-ink-3 mt-1.5">Fraunhofer ISE · Freiburg</div>
</a>
</div>
</aside>
</div>
<!-- Archiv-Footer der Hero-Sektion -->
<div class="mt-6 flex items-center justify-between py-4 px-5 bg-brand-soft border-l-2 border-accent">
<div class="flex items-baseline gap-3">
<span class="font-serif text-[24px] font-semibold text-accent tracking-[-0.3px]" style="font-variant-numeric:tabular-nums;">47</span>
<span class="text-[13px] text-ink-2">Mitteilungen zu diesem Thema im Archiv · seit 2018</span>
</div>
<a class="inline-flex items-center gap-2 text-[12.5px] font-semibold text-accent hover:text-brand-deep2">
Vollständige Themen-Recherche
<svg width="11" height="11" viewBox="0 0 12 12" fill="none">
<path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</section>
<!-- ============== DIESE WOCHE IN DEN BRANCHEN + AUS DEM ARCHIV ============== -->
<section class="mt-16 grid gap-9" style="grid-template-columns:1.7fr 1fr;">
<!-- Linke Spalte: Branchen-gruppierte Liste -->
<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] leading-[1.2]">Diese Woche in den Branchen</h2>
<div class="flex gap-[18px] text-[12.5px] text-ink-3">
<a href="#" class="text-ink border-b-[1.5px] border-accent pb-0.5">Diese Woche</a>
<a href="#">Letzte Woche</a>
<a href="#">KW 18</a>
</div>
</header>
<hr class="rule-strong" />
<!-- BRANCHE: Energie -->
<div class="pt-6 pb-2">
<div class="flex items-baseline justify-between pb-2.5 border-b border-bg-rule-strong/40">
<div class="flex items-baseline gap-3">
<h3 class="font-serif text-[19px] font-semibold m-0 tracking-[-0.2px] text-accent">Energie</h3>
<span class="text-[11.5px] text-ink-3"><span class="font-mono font-semibold text-ink-2">8</span> Mitteilungen diese Woche</span>
</div>
<a class="text-[11.5px] text-ink-3 hover:text-accent">Alle Mitteilungen Energie →</a>
</div>
<a class="block py-3.5 border-b border-bg-rule grid items-baseline gap-4" style="grid-template-columns:80px 1fr auto;">
<span class="font-mono text-[11px] text-ink-3 tracking-wide">12. Mai</span>
<div>
<div class="font-serif text-[16px] leading-[1.3] font-medium text-ink">
Stadtwerke München erreichen 100 % Ökostrom-Ziel für Privatkunden
</div>
<div class="text-[11.5px] text-ink-3 mt-1">SWM Stadtwerke München · München</div>
</div>
<span class="text-[10.5px] text-ink-4 font-mono">3 verwandte</span>
</a>
<a class="block py-3.5 border-b border-bg-rule grid items-baseline gap-4" style="grid-template-columns:80px 1fr auto;">
<span class="font-mono text-[11px] text-ink-3 tracking-wide">11. Mai</span>
<div>
<div class="font-serif text-[16px] leading-[1.3] font-medium text-ink">
RWE startet 1,8 GW Offshore-Windpark vor Helgoland — größtes Projekt der Nordsee 2026
</div>
<div class="text-[11.5px] text-ink-3 mt-1">RWE AG · Essen</div>
</div>
<span class="text-[10.5px] text-ink-4 font-mono">12 verwandte</span>
</a>
<a class="block py-3.5 grid items-baseline gap-4" style="grid-template-columns:80px 1fr auto;">
<span class="font-mono text-[11px] text-ink-3 tracking-wide">9. Mai</span>
<div>
<div class="font-serif text-[16px] leading-[1.3] font-medium text-ink">
EnBW unterzeichnet Wasserstoff-Lieferabkommen mit Air Liquide
</div>
<div class="text-[11.5px] text-ink-3 mt-1">EnBW Energie · Karlsruhe</div>
</div>
<span class="text-[10.5px] text-ink-4 font-mono">47 verwandte</span>
</a>
</div>
<!-- BRANCHE: Bildung -->
<div class="pt-8 pb-2">
<div class="flex items-baseline justify-between pb-2.5 border-b border-bg-rule-strong/40">
<div class="flex items-baseline gap-3">
<h3 class="font-serif text-[19px] font-semibold m-0 tracking-[-0.2px] text-accent">Bildung</h3>
<span class="text-[11.5px] text-ink-3"><span class="font-mono font-semibold text-ink-2">4</span> Mitteilungen diese Woche</span>
</div>
<a class="text-[11.5px] text-ink-3 hover:text-accent">Alle Mitteilungen Bildung →</a>
</div>
<a class="block py-3.5 border-b border-bg-rule grid items-baseline gap-4" style="grid-template-columns:80px 1fr auto;">
<span class="font-mono text-[11px] text-ink-3 tracking-wide">12. Mai</span>
<div>
<div class="font-serif text-[16px] leading-[1.3] font-medium text-ink">
Digitalisierung im Bildungssektor: Bund stellt 2 Mrd. Euro Förderung bereit
</div>
<div class="text-[11.5px] text-ink-3 mt-1">EduTech Initiative · Frankfurt</div>
</div>
<span class="text-[10.5px] text-ink-4 font-mono">18 verwandte</span>
</a>
<a class="block py-3.5 grid items-baseline gap-4" style="grid-template-columns:80px 1fr auto;">
<span class="font-mono text-[11px] text-ink-3 tracking-wide">10. Mai</span>
<div>
<div class="font-serif text-[16px] leading-[1.3] font-medium text-ink">
Hochschulrektorenkonferenz fordert Reform der akademischen Weiterbildung
</div>
<div class="text-[11.5px] text-ink-3 mt-1">HRK · Bonn</div>
</div>
<span class="text-[10.5px] text-ink-4 font-mono">6 verwandte</span>
</a>
</div>
<!-- ANZEIGE im Branchen-Block (zurückhaltend) -->
<div class="mt-7 -mx-4">
<div class="flex items-center gap-2.5 px-4">
<span class="h-px flex-1" style="background:#CFC7B0;"></span>
<span class="text-[9px] font-bold tracking-[0.24em] uppercase" style="color:#8A918D;">Anzeige</span>
<span class="h-px flex-1" style="background:#CFC7B0;"></span>
</div>
<a class="block py-4 px-4 grid items-baseline gap-4 bg-bg-card-warm" style="grid-template-columns:80px 1fr auto;">
<span class="font-mono text-[11px]" style="color:#5A6360;">9. Mai</span>
<div>
<div class="text-[9.5px] font-bold tracking-[0.16em] uppercase mb-1" style="color:#5A6360;">Forschung &amp; Entwicklung</div>
<div class="font-serif text-[16px] leading-[1.3] font-medium" style="color:#3A413D;">
Fraunhofer-Institut veröffentlicht Whitepaper zu KI in industriellen Lieferketten
</div>
<div class="text-[11.5px] mt-1" style="color:#5A6360;">Fraunhofer-Gesellschaft</div>
</div>
<span class="text-[10.5px] font-mono" style="color:#8A918D;">PDF · 36 Seiten</span>
</a>
</div>
<!-- BRANCHE: Industrie -->
<div class="pt-8 pb-2">
<div class="flex items-baseline justify-between pb-2.5 border-b border-bg-rule-strong/40">
<div class="flex items-baseline gap-3">
<h3 class="font-serif text-[19px] font-semibold m-0 tracking-[-0.2px] text-accent">Industrie</h3>
<span class="text-[11.5px] text-ink-3"><span class="font-mono font-semibold text-ink-2">6</span> Mitteilungen diese Woche</span>
</div>
<a class="text-[11.5px] text-ink-3 hover:text-accent">Alle Mitteilungen Industrie →</a>
</div>
<a class="block py-3.5 border-b border-bg-rule grid items-baseline gap-4" style="grid-template-columns:80px 1fr auto;">
<span class="font-mono text-[11px] text-ink-3 tracking-wide">11. Mai</span>
<div>
<div class="font-serif text-[16px] leading-[1.3] font-medium text-ink">
Deutsche Unternehmen investieren 15 Mrd. Euro in Automatisierung — IW-Studie
</div>
<div class="text-[11.5px] text-ink-3 mt-1">Institut der deutschen Wirtschaft · Köln</div>
</div>
<span class="text-[10.5px] text-ink-4 font-mono">23 verwandte</span>
</a>
<a class="block py-3.5 grid items-baseline gap-4" style="grid-template-columns:80px 1fr auto;">
<span class="font-mono text-[11px] text-ink-3 tracking-wide">8. Mai</span>
<div>
<div class="font-serif text-[16px] leading-[1.3] font-medium text-ink">
BASF schließt Restrukturierung am Standort Ludwigshafen ab
</div>
<div class="text-[11.5px] text-ink-3 mt-1">BASF SE · Ludwigshafen</div>
</div>
<span class="text-[10.5px] text-ink-4 font-mono">9 verwandte</span>
</a>
</div>
<!-- BRANCHE: Mobilität -->
<div class="pt-8 pb-2">
<div class="flex items-baseline justify-between pb-2.5 border-b border-bg-rule-strong/40">
<div class="flex items-baseline gap-3">
<h3 class="font-serif text-[19px] font-semibold m-0 tracking-[-0.2px] text-accent">Mobilität</h3>
<span class="text-[11.5px] text-ink-3"><span class="font-mono font-semibold text-ink-2">5</span> Mitteilungen diese Woche</span>
</div>
<a class="text-[11.5px] text-ink-3 hover:text-accent">Alle Mitteilungen Mobilität →</a>
</div>
<a class="block py-3.5 border-b border-bg-rule grid items-baseline gap-4" style="grid-template-columns:80px 1fr auto;">
<span class="font-mono text-[11px] text-ink-3 tracking-wide">10. Mai</span>
<div>
<div class="font-serif text-[16px] leading-[1.3] font-medium text-ink">
VW eröffnet Batteriewerk in Salzgitter — 4.000 Arbeitsplätze entstehen
</div>
<div class="text-[11.5px] text-ink-3 mt-1">Volkswagen AG · Wolfsburg</div>
</div>
<span class="text-[10.5px] text-ink-4 font-mono">31 verwandte</span>
</a>
<a class="block py-3.5 grid items-baseline gap-4" style="grid-template-columns:80px 1fr auto;">
<span class="font-mono text-[11px] text-ink-3 tracking-wide">7. Mai</span>
<div>
<div class="font-serif text-[16px] leading-[1.3] font-medium text-ink">
E-Mobilität: Ladeinfrastruktur wächst um 38 % gegenüber Vorjahr
</div>
<div class="text-[11.5px] text-ink-3 mt-1">Bundesverband eMobilität · Berlin</div>
</div>
<span class="text-[10.5px] text-ink-4 font-mono">14 verwandte</span>
</a>
</div>
<div class="flex justify-center mt-9">
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-[13px] font-semibold text-ink bg-transparent border border-bg-rule-strong rounded-[2px] hover:bg-ink hover:text-bg transition-colors">
Alle Branchen dieser Woche anzeigen →
</button>
</div>
</div>
<!-- Rechte Spalte: Aus dem Archiv / Publisher-CTA / Newsrooms mit Themen-Tiefe -->
<aside class="flex flex-col gap-10">
<!-- AUS DEM ARCHIV -->
<div>
<header class="mb-4 min-h-[34px]">
<h2 class="font-serif text-[26px] font-semibold m-0 tracking-[-0.3px] leading-[1.2]">Aus dem Archiv</h2>
<div class="eyebrow muted mt-1.5">Diese Woche wiedergefunden</div>
</header>
<hr class="rule-accent" />
<!-- Item 1: noch zitiert -->
<article class="py-4 border-b border-bg-rule">
<div class="grid gap-3" style="grid-template-columns:48px 1fr;">
<div class="w-12 h-12 flex items-center justify-center font-serif text-[18px] font-semibold text-accent border border-accent/30 bg-brand-soft" style="font-variant-numeric:tabular-nums;">01</div>
<div>
<div class="text-[10.5px] font-bold tracking-[0.14em] uppercase text-archive mb-1.5">
Wird noch heute zitiert
</div>
<div class="font-serif text-[15px] leading-[1.35] font-medium text-ink">
„Studie zur deutschen Industrieforschung 2021"
</div>
<div class="text-[11.5px] text-ink-3 mt-2 flex items-center gap-2">
<span>Fraunhofer-Gesellschaft</span><span class="text-ink-4">·</span>
<span class="font-mono">Mai 2021</span>
</div>
<div class="text-[11px] text-ink-3 mt-1.5 italic">
Weiterhin 340 Aufrufe pro Monat · 47 Backlinks
</div>
</div>
</div>
</article>
<!-- Item 2: Vor 5 Jahren -->
<article class="py-4 border-b border-bg-rule">
<div class="grid gap-3" style="grid-template-columns:48px 1fr;">
<div class="w-12 h-12 flex items-center justify-center font-serif text-[18px] font-semibold text-accent border border-accent/30 bg-brand-soft" style="font-variant-numeric:tabular-nums;">02</div>
<div>
<div class="text-[10.5px] font-bold tracking-[0.14em] uppercase text-archive mb-1.5">
Vor 5 Jahren · Mai 2021
</div>
<div class="font-serif text-[15px] leading-[1.35] font-medium text-ink">
Übersicht: Erste 5G-Tests in deutschen Industrieparks
</div>
<!-- Sepia-Bild als bewusste Editorial-Geste -->
<div class="mt-2.5 h-[88px] relative overflow-hidden bg-bg-card-warm border border-bg-card-warm-border">
<svg width="100%" height="100%" viewBox="0 0 280 88" class="absolute inset-0 sepia-img" preserveAspectRatio="none">
<rect width="280" height="88" fill="#A8967C"/>
<g opacity="0.6" stroke="#5A4632" stroke-width="1" fill="none">
<rect x="20" y="30" width="40" height="48"/>
<rect x="70" y="20" width="40" height="58"/>
<rect x="120" y="35" width="50" height="43"/>
<rect x="180" y="15" width="40" height="63"/>
<rect x="230" y="40" width="40" height="38"/>
</g>
<line x1="0" y1="78" x2="280" y2="78" stroke="#5A4632" stroke-width="1.5" opacity="0.7"/>
</svg>
</div>
<div class="text-[11.5px] text-ink-3 mt-2">
Deutsche Telekom · Bonn
</div>
</div>
</div>
</article>
<!-- Item 3: Themen-Klassiker -->
<article class="py-4">
<div class="grid gap-3" style="grid-template-columns:48px 1fr;">
<div class="w-12 h-12 flex items-center justify-center font-serif text-[18px] font-semibold text-accent border border-accent/30 bg-brand-soft" style="font-variant-numeric:tabular-nums;">03</div>
<div>
<div class="text-[10.5px] font-bold tracking-[0.14em] uppercase text-archive mb-1.5">
Themen-Klassiker
</div>
<div class="font-serif text-[15px] leading-[1.35] font-medium text-ink">
Energiewende: Die 20 meistreferenzierten Mitteilungen der letzten 8 Jahre
</div>
<div class="text-[11.5px] text-ink-3 mt-2 italic">
Redaktionell zusammengestellt · Aktualisiert quartalsweise
</div>
</div>
</div>
</article>
<a class="block mt-3 text-[12.5px] text-accent font-semibold hover:text-brand-deep2 pt-3 border-t border-bg-rule">
Vollständige Archiv-Recherche →
</a>
</div>
<!-- PUBLISHER-CTA -->
<!-- Eigenständig, weist auf den gemeinsamen Hub-Bereich hin -->
<div class="bg-accent-grad text-ink-on-dark p-6 border-l-2 border-white/20">
<div class="eyebrow mb-2.5" style="color:#9BD5B2;letter-spacing:0.22em;">FÜR UNTERNEHMEN &amp; REDAKTIONEN</div>
<h3 class="font-serif text-[20px] font-semibold m-0 mb-2 tracking-[-0.2px] leading-[1.25] text-white">
Pressemitteilung dauerhaft im Archiv platzieren
</h3>
<p class="text-[12.5px] leading-[1.55] m-0 mb-5 text-white/75">
Themen-Verknüpfung, redaktionelle Prüfung, langfristige Auffindbarkeit. Veröffentlichung über den gemeinsamen Publisher-Bereich.
</p>
<button class="w-full inline-flex items-center justify-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold bg-white text-accent rounded-[2px] hover:bg-bg">
Veröffentlichung vorbereiten →
</button>
<button class="flex items-center justify-center gap-1.5 w-full mt-3 py-2 text-[12px] font-medium text-white/75 hover:text-white underline underline-offset-[3px] decoration-white/30">
Tarife &amp; Pakete ansehen
</button>
</div>
<!-- NEWSROOMS MIT THEMEN-TIEFE -->
<div>
<header class="mb-4 min-h-[34px]">
<h2 class="font-serif text-[26px] font-semibold m-0 tracking-[-0.3px] leading-[1.2]">Newsrooms mit Themen-Tiefe</h2>
<div class="eyebrow muted mt-1.5">Sortiert nach Archivbestand</div>
</header>
<hr class="rule-accent mb-1" />
<!-- Newsroom-Eintrag — kein „heute aktiv" -->
<a class="grid items-start gap-3 py-3.5 border-b border-bg-rule" style="grid-template-columns:36px 1fr auto;">
<div class="w-9 h-9 text-white flex items-center justify-center text-[14px] font-bold font-serif" style="background:#0098A6;">S</div>
<div>
<div class="text-[13.5px] font-semibold leading-[1.2]">Siemens AG</div>
<div class="text-[11px] text-ink-3 mt-1 leading-[1.4]">Industrie · Technologie · Energie</div>
</div>
<div class="text-right whitespace-nowrap">
<div class="font-mono text-[13px] font-semibold text-ink">842</div>
<div class="text-[10.5px] text-ink-3 mt-0.5">seit 2012</div>
</div>
</a>
<a class="grid items-start gap-3 py-3.5 border-b border-bg-rule" style="grid-template-columns:36px 1fr auto;">
<div class="w-9 h-9 text-white flex items-center justify-center text-[14px] font-bold font-serif" style="background:#21A038;">B</div>
<div>
<div class="text-[13.5px] font-semibold leading-[1.2]">BASF SE</div>
<div class="text-[11px] text-ink-3 mt-1 leading-[1.4]">Chemie · Industrie · Forschung</div>
</div>
<div class="text-right whitespace-nowrap">
<div class="font-mono text-[13px] font-semibold text-ink">567</div>
<div class="text-[10.5px] text-ink-3 mt-0.5">seit 2013</div>
</div>
</a>
<a class="grid items-start gap-3 py-3.5 border-b border-bg-rule" style="grid-template-columns:36px 1fr auto;">
<div class="w-9 h-9 text-white flex items-center justify-center text-[14px] font-bold font-serif" style="background:#C4002F;">D</div>
<div>
<div class="text-[13.5px] font-semibold leading-[1.2]">Deutsche Bahn AG</div>
<div class="text-[11px] text-ink-3 mt-1 leading-[1.4]">Mobilität · Verkehr · Logistik</div>
</div>
<div class="text-right whitespace-nowrap">
<div class="font-mono text-[13px] font-semibold text-ink">490</div>
<div class="text-[10.5px] text-ink-3 mt-0.5">seit 2012</div>
</div>
</a>
<a class="grid items-start gap-3 py-3.5 border-b border-bg-rule" style="grid-template-columns:36px 1fr auto;">
<div class="w-9 h-9 text-white flex items-center justify-center text-[14px] font-bold font-serif" style="background:#1E1E1E;">V</div>
<div>
<div class="text-[13.5px] font-semibold leading-[1.2]">Volkswagen AG</div>
<div class="text-[11px] text-ink-3 mt-1 leading-[1.4]">Mobilität · Industrie · E-Mobilität</div>
</div>
<div class="text-right whitespace-nowrap">
<div class="font-mono text-[13px] font-semibold text-ink">438</div>
<div class="text-[10.5px] text-ink-3 mt-0.5">seit 2012</div>
</div>
</a>
<a class="grid items-start gap-3 py-3.5 border-b border-bg-rule" style="grid-template-columns:36px 1fr auto;">
<div class="w-9 h-9 text-white flex items-center justify-center text-[14px] font-bold font-serif" style="background:#0018A8;">D</div>
<div>
<div class="text-[13.5px] font-semibold leading-[1.2]">Deutsche Bank</div>
<div class="text-[11px] text-ink-3 mt-1 leading-[1.4]">Finanzen · Wirtschaft · M&amp;A</div>
</div>
<div class="text-right whitespace-nowrap">
<div class="font-mono text-[13px] font-semibold text-ink">391</div>
<div class="text-[10.5px] text-ink-3 mt-0.5">seit 2012</div>
</div>
</a>
<a class="grid items-start gap-3 py-3.5" style="grid-template-columns:36px 1fr auto;">
<div class="w-9 h-9 text-white flex items-center justify-center text-[14px] font-bold font-serif" style="background:#003781;">A</div>
<div>
<div class="text-[13.5px] font-semibold leading-[1.2]">Fraunhofer-Gesellschaft</div>
<div class="text-[11px] text-ink-3 mt-1 leading-[1.4]">Forschung · Studien · Whitepaper</div>
</div>
<div class="text-right whitespace-nowrap">
<div class="font-mono text-[13px] font-semibold text-ink">354</div>
<div class="text-[10.5px] text-ink-3 mt-0.5">seit 2014</div>
</div>
</a>
<a class="block mt-3 text-[12.5px] text-accent font-semibold hover:text-brand-deep2 pt-3 border-t border-bg-rule">
Alle Newsrooms (1.247 mit ≥ 10 Mitteilungen) →
</a>
</div>
</aside>
</section>
<!-- ============== THEMENWELT IM DETAIL ============== -->
<section class="mt-16">
<header class="flex items-baseline justify-between mb-4">
<div class="flex items-baseline gap-3">
<span class="section-eyebrow">Themenwelt im Detail</span>
<h2 class="font-serif text-[26px] font-semibold m-0 tracking-[-0.3px] text-ink">
Energie &amp; Klima
</h2>
</div>
<div class="text-[11.5px] text-ink-3">Wöchentlich kuratiert · KW 20</div>
</header>
<hr class="rule-accent" />
<!-- 3 Archiv-Stat-Spalten (statt Live-Zahlen) -->
<div class="grid grid-cols-3 border-b border-bg-rule">
<div class="px-6 py-6 border-r border-bg-rule">
<div class="eyebrow muted mb-2.5">Im Archiv</div>
<div class="font-serif text-[34px] font-semibold leading-none tracking-[-0.5px] text-ink" style="font-variant-numeric:tabular-nums;">234</div>
<div class="text-[11.5px] text-ink-3 mt-2">Mitteilungen zu diesem Thema seit 2018</div>
</div>
<div class="px-6 py-6 border-r border-bg-rule">
<div class="eyebrow muted mb-2.5">Aktive Unternehmen</div>
<div class="font-serif text-[34px] font-semibold leading-none tracking-[-0.5px] text-ink" style="font-variant-numeric:tabular-nums;">87</div>
<div class="text-[11.5px] text-ink-3 mt-2">in dieser Themenwelt erfasst</div>
</div>
<div class="px-6 py-6">
<div class="eyebrow muted mb-2.5">Erster Beitrag</div>
<div class="font-serif text-[34px] font-semibold leading-none tracking-[-0.5px] text-ink">14. März</div>
<div class="text-[11.5px] text-ink-3 mt-2">2018 · Fraunhofer ISE</div>
</div>
</div>
<div class="grid gap-9 mt-7" style="grid-template-columns:1.7fr 1fr;">
<!-- Featured Themen-Mitteilungen mit Archiv-Bezug -->
<div>
<a class="grid items-baseline gap-4 py-4 border-b border-bg-rule" style="grid-template-columns:90px 1fr;">
<span class="font-mono text-[11.5px] text-ink-3">11. Mai 2026</span>
<div>
<div class="font-serif text-[17px] leading-[1.3] font-medium tracking-[-0.1px] text-ink">
RWE startet 1,8 GW Offshore-Windpark vor Helgoland — größtes Projekt der Nordsee 2026
</div>
<div class="text-[11.5px] text-ink-3 mt-1.5">
RWE AG · Essen
<span class="text-ink-4 mx-1.5">·</span>
<span class="text-archive font-medium">Knüpft an Mitteilung vom 8. April 2023 an</span>
</div>
</div>
</a>
<a class="grid items-baseline gap-4 py-4 border-b border-bg-rule" style="grid-template-columns:90px 1fr;">
<span class="font-mono text-[11.5px] text-ink-3">9. Mai 2026</span>
<div>
<div class="font-serif text-[17px] leading-[1.3] font-medium tracking-[-0.1px] text-ink">
EnBW unterzeichnet Wasserstoff-Lieferabkommen mit Air Liquide
</div>
<div class="text-[11.5px] text-ink-3 mt-1.5">
EnBW Energie · Karlsruhe
<span class="text-ink-4 mx-1.5">·</span>
<span class="text-archive font-medium">3. Mitteilung zu Wasserstoff-Korridor seit 2018</span>
</div>
</div>
</a>
<a class="grid items-baseline gap-4 py-4 border-b border-bg-rule" style="grid-template-columns:90px 1fr;">
<span class="font-mono text-[11.5px] text-ink-3">7. Mai 2026</span>
<div>
<div class="font-serif text-[17px] leading-[1.3] font-medium tracking-[-0.1px] text-ink">
Stadtwerke München erreichen 100 % Ökostrom-Ziel für Privatkunden
</div>
<div class="text-[11.5px] text-ink-3 mt-1.5">
SWM · München
<span class="text-ink-4 mx-1.5">·</span>
<span class="text-archive font-medium">Vorangekündigt 19. November 2019</span>
</div>
</div>
</a>
<a class="grid items-baseline gap-4 py-4 border-b border-bg-rule" style="grid-template-columns:90px 1fr;">
<span class="font-mono text-[11.5px] text-ink-3">5. Mai 2026</span>
<div>
<div class="font-serif text-[17px] leading-[1.3] font-medium tracking-[-0.1px] text-ink">
Bayerische Landesregierung beschließt 4,2 Mrd. Förderprogramm für Wärmenetze
</div>
<div class="text-[11.5px] text-ink-3 mt-1.5">
Bayerisches Staatsministerium für Wirtschaft
</div>
</div>
</a>
<div class="mt-4">
<a class="inline-flex items-center gap-2 text-[12.5px] font-semibold text-accent hover:text-brand-deep2">
Vollständige Themen-Übersicht Energie &amp; Klima →
</a>
</div>
</div>
<!-- Hintergrund-Studie (passt hier besser als auf der Wirtschaftsseite) -->
<aside>
<div class="bg-bg-card-warm p-6 border-t-[3px] border-accent">
<div class="eyebrow mb-2.5" style="color:#1F4D3A;letter-spacing:0.22em;">STUDIE · HINTERGRUND</div>
<h3 class="font-serif text-[21px] font-semibold m-0 mb-3 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-4 leading-[1.55]">
Fraunhofer-Institut für Solare Energiesysteme<br>
<span class="font-mono text-[11px]">PDF · 84 Seiten · Veröffentlicht 11. Nov 2025</span>
</div>
<!-- Mini-Inhalt -->
<ul class="text-[12.5px] text-ink-2 leading-[1.5] mb-5 pl-0 list-none space-y-1.5 border-t border-bg-card-warm-border pt-3.5">
<li class="flex gap-2">
<span class="text-accent mt-0.5">→</span>
<span>Kapazitätsentwicklung in 240 DACH-Regionen</span>
</li>
<li class="flex gap-2">
<span class="text-accent mt-0.5">→</span>
<span>Engpässe in der Netzanbindung</span>
</li>
<li class="flex gap-2">
<span class="text-accent mt-0.5">→</span>
<span>Vergleich von 6 Förderprogrammen</span>
</li>
</ul>
<button class="w-full inline-flex items-center justify-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold bg-transparent text-ink border border-ink rounded-[2px] hover:bg-ink hover:text-bg transition-colors">
↓ Studie herunterladen
</button>
<div class="mt-2.5 text-[10.5px] leading-[1.45] flex items-center gap-1.5" style="color:#5A6360;">
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" class="flex-shrink-0" style="color:#8A918D;">
<rect x="1.5" y="3" width="9" height="6.5" stroke="currentColor" stroke-width="1" />
<path d="M1.5 3l4.5 3.5L10.5 3" stroke="currentColor" stroke-width="1" fill="none" />
</svg>
<span>Kostenlos · Anmeldung per E-Mail erforderlich</span>
</div>
</div>
</aside>
</div>
</section>
<!-- ============== PRESSETERMINE ============== -->
<section class="mt-16">
<header class="flex items-baseline justify-between mb-4 flex-wrap gap-3">
<div class="flex items-baseline gap-3.5">
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px]">Pressetermine</h2>
<span class="eyebrow muted">Zur fachlichen Vorbereitung · KW 20</span>
</div>
<div class="flex items-center gap-4 text-[12px]">
<span class="inline-flex items-center gap-1.5 text-ink-2">
<svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M3 7h18M3 12h18M3 17h12" stroke="currentColor" stroke-width="2" /></svg>
Alle Branchen
</span>
<a class="inline-flex items-center gap-1.5 text-ink-2">
<svg width="11" height="11" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2" /><path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" stroke-width="2" /></svg>
iCal abonnieren
</a>
<a class="text-accent font-semibold">Alle Termine →</a>
</div>
</header>
<hr class="rule-strong" />
<div class="grid border-b border-bg-rule" style="grid-template-columns:repeat(7,minmax(0,1fr));">
<a class="block p-4 pb-[18px] relative border-r border-bg-rule" style="background:rgba(31,77,58,0.04);">
<span class="absolute top-3.5 right-3.5 w-1.5 h-1.5 rounded-full bg-accent"></span>
<div class="flex items-baseline gap-1.5 mb-2.5">
<span class="text-[11px] font-bold tracking-[0.16em] uppercase text-accent">Heute</span>
<span class="text-[10.5px] text-ink-3 font-mono">13. Mai</span>
</div>
<div class="text-[10.5px] tracking-[0.08em] uppercase font-bold text-ink-2 mb-1.5">Bilanzpressekonferenz</div>
<div class="font-serif text-[15px] font-semibold leading-[1.25] mb-2">SAP SE</div>
<div class="flex items-center gap-1.5 text-[11px] text-ink-3">
<span class="font-mono">07:00</span><span>·</span><span>Q1 2026</span>
</div>
</a>
<a class="block p-4 pb-[18px] border-r border-bg-rule" style="background:rgba(31,77,58,0.04);">
<div class="flex items-baseline gap-1.5 mb-2.5">
<span class="text-[11px] font-bold tracking-[0.16em] uppercase text-accent">Heute</span>
<span class="text-[10.5px] text-ink-3 font-mono">13. Mai</span>
</div>
<div class="text-[10.5px] tracking-[0.08em] uppercase font-bold text-ink-2 mb-1.5">Hauptversammlung</div>
<div class="font-serif text-[15px] font-semibold leading-[1.25] mb-2">Allianz SE</div>
<div class="flex items-center gap-1.5 text-[11px] text-ink-3">
<span class="font-mono">10:00</span><span>·</span><span>München</span>
</div>
</a>
<a class="block p-4 pb-[18px] relative border-r border-bg-rule">
<div class="flex items-baseline gap-1.5 mb-2.5">
<span class="text-[11px] font-bold tracking-[0.12em] uppercase text-ink-3">Morgen</span>
<span class="text-[10.5px] text-ink-3 font-mono">14. Mai</span>
</div>
<div class="text-[10.5px] tracking-[0.08em] uppercase font-bold text-ink-2 mb-1.5">Strategie-Briefing</div>
<div class="font-serif text-[15px] font-semibold leading-[1.25] mb-2">Volkswagen AG</div>
<div class="flex items-center gap-1.5 text-[11px] text-ink-3">
<span class="font-mono">09:30</span><span>·</span><span>Strategie 2030</span>
</div>
</a>
<a class="block p-4 pb-[18px] border-r border-bg-rule">
<div class="flex items-baseline gap-1.5 mb-2.5">
<span class="text-[11px] font-bold tracking-[0.12em] uppercase text-ink-3">Morgen</span>
<span class="text-[10.5px] text-ink-3 font-mono">14. Mai</span>
</div>
<div class="text-[10.5px] tracking-[0.08em] uppercase font-bold text-ink-2 mb-1.5">Bilanzpressekonferenz</div>
<div class="font-serif text-[15px] font-semibold leading-[1.25] mb-2">Deutsche Telekom</div>
<div class="flex items-center gap-1.5 text-[11px] text-ink-3">
<span class="font-mono">07:00</span><span>·</span><span>Q1 2026</span>
</div>
</a>
<a class="block p-4 pb-[18px] border-r border-bg-rule">
<div class="flex items-baseline gap-1.5 mb-2.5">
<span class="text-[11px] font-bold tracking-[0.12em] uppercase text-ink-3">Do</span>
<span class="text-[10.5px] text-ink-3 font-mono">15. Mai</span>
</div>
<div class="text-[10.5px] tracking-[0.08em] uppercase font-bold text-ink-2 mb-1.5">Fachkonferenz</div>
<div class="font-serif text-[15px] font-semibold leading-[1.25] mb-2">Hannover Messe</div>
<div class="flex items-center gap-1.5 text-[11px] text-ink-3">
<span class="font-mono">Ganztägig</span><span>·</span><span>Industrie 4.0</span>
</div>
</a>
<a class="block p-4 pb-[18px] border-r border-bg-rule">
<div class="flex items-baseline gap-1.5 mb-2.5">
<span class="text-[11px] font-bold tracking-[0.12em] uppercase text-ink-3">Fr</span>
<span class="text-[10.5px] text-ink-3 font-mono">16. Mai</span>
</div>
<div class="text-[10.5px] tracking-[0.08em] uppercase font-bold text-ink-2 mb-1.5">Hauptversammlung</div>
<div class="font-serif text-[15px] font-semibold leading-[1.25] mb-2">BMW Group</div>
<div class="flex items-center gap-1.5 text-[11px] text-ink-3">
<span class="font-mono">10:00</span><span>·</span><span>München</span>
</div>
</a>
<a class="block p-4 pb-[18px] relative">
<div class="flex items-baseline gap-1.5 mb-2.5">
<span class="text-[11px] font-bold tracking-[0.12em] uppercase text-ink-3">Mo</span>
<span class="text-[10.5px] text-ink-3 font-mono">19. Mai</span>
</div>
<div class="text-[10.5px] tracking-[0.08em] uppercase font-bold text-ink-2 mb-1.5">Bilanzpressekonferenz</div>
<div class="font-serif text-[15px] font-semibold leading-[1.25] mb-2">Siemens AG</div>
<div class="flex items-center gap-1.5 text-[11px] text-ink-3">
<span class="font-mono">07:00</span><span>·</span><span>Q2 2026</span>
</div>
</a>
</div>
</section>
<!-- ============== BRANCHEN-ÜBERSICHT — Bestand, keine Trends ============== -->
<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-Übersicht</h2>
<span class="eyebrow muted">Bestand im Archiv</span>
</header>
<hr class="rule-strong" />
<div class="grid border-b border-bg-rule" style="grid-template-columns:repeat(4,minmax(0,1fr));">
<a class="block px-6 py-5 border-r border-bg-rule hover:bg-bg-elev transition-colors">
<div class="text-[13.5px] font-semibold mb-2.5">Technologie</div>
<div class="flex items-baseline gap-2 mb-3">
<span class="font-serif text-[26px] font-semibold tracking-[-0.3px] text-ink" style="font-variant-numeric:tabular-nums;">12.847</span>
</div>
<div class="text-[11px] text-ink-3 mb-2">Mitteilungen · seit 2012</div>
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-accent" style="width:100%;"></div></div>
</a>
<a class="block px-6 py-5 border-r border-bg-rule hover:bg-bg-elev transition-colors">
<div class="text-[13.5px] font-semibold mb-2.5">Finanzen</div>
<div class="flex items-baseline gap-2 mb-3">
<span class="font-serif text-[26px] font-semibold tracking-[-0.3px] text-ink" style="font-variant-numeric:tabular-nums;">9.234</span>
</div>
<div class="text-[11px] text-ink-3 mb-2">Mitteilungen · seit 2012</div>
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-accent" style="width:72%;"></div></div>
</a>
<a class="block px-6 py-5 border-r border-bg-rule hover:bg-bg-elev transition-colors">
<div class="text-[13.5px] font-semibold mb-2.5">Industrie</div>
<div class="flex items-baseline gap-2 mb-3">
<span class="font-serif text-[26px] font-semibold tracking-[-0.3px] text-ink" style="font-variant-numeric:tabular-nums;">8.451</span>
</div>
<div class="text-[11px] text-ink-3 mb-2">Mitteilungen · seit 2012</div>
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-accent" style="width:66%;"></div></div>
</a>
<a class="block px-6 py-5 hover:bg-bg-elev transition-colors">
<div class="text-[13.5px] font-semibold mb-2.5">Energie</div>
<div class="flex items-baseline gap-2 mb-3">
<span class="font-serif text-[26px] font-semibold tracking-[-0.3px] text-ink" style="font-variant-numeric:tabular-nums;">6.402</span>
</div>
<div class="text-[11px] text-ink-3 mb-2">Mitteilungen · seit 2014</div>
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-accent" style="width:50%;"></div></div>
</a>
<a class="block px-6 py-5 border-r border-t border-bg-rule hover:bg-bg-elev transition-colors">
<div class="text-[13.5px] font-semibold mb-2.5">Gesundheit</div>
<div class="flex items-baseline gap-2 mb-3">
<span class="font-serif text-[26px] font-semibold tracking-[-0.3px] text-ink" style="font-variant-numeric:tabular-nums;">5.119</span>
</div>
<div class="text-[11px] text-ink-3 mb-2">Mitteilungen · seit 2013</div>
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-accent" style="width:40%;"></div></div>
</a>
<a class="block px-6 py-5 border-r border-t border-bg-rule hover:bg-bg-elev transition-colors">
<div class="text-[13.5px] font-semibold mb-2.5">Mobilität</div>
<div class="flex items-baseline gap-2 mb-3">
<span class="font-serif text-[26px] font-semibold tracking-[-0.3px] text-ink" style="font-variant-numeric:tabular-nums;">4.487</span>
</div>
<div class="text-[11px] text-ink-3 mb-2">Mitteilungen · seit 2012</div>
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-accent" style="width:35%;"></div></div>
</a>
<a class="block px-6 py-5 border-r border-t border-bg-rule hover:bg-bg-elev transition-colors">
<div class="text-[13.5px] font-semibold mb-2.5">Handel</div>
<div class="flex items-baseline gap-2 mb-3">
<span class="font-serif text-[26px] font-semibold tracking-[-0.3px] text-ink" style="font-variant-numeric:tabular-nums;">3.829</span>
</div>
<div class="text-[11px] text-ink-3 mb-2">Mitteilungen · seit 2012</div>
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-accent" style="width:30%;"></div></div>
</a>
<a class="block px-6 py-5 border-t border-bg-rule hover:bg-bg-elev transition-colors">
<div class="text-[13.5px] font-semibold mb-2.5">Bildung</div>
<div class="flex items-baseline gap-2 mb-3">
<span class="font-serif text-[26px] font-semibold tracking-[-0.3px] text-ink" style="font-variant-numeric:tabular-nums;">2.847</span>
</div>
<div class="text-[11px] text-ink-3 mb-2">Mitteilungen · seit 2012</div>
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-accent" style="width:22%;"></div></div>
</a>
</div>
<div class="flex justify-between items-center mt-4 text-[11.5px] text-ink-3">
<span>Tiefe statt Bewegung — die Zahl ist hier das Statement.</span>
<a class="text-accent font-semibold hover:text-brand-deep2">Alle 24 Branchen anzeigen →</a>
</div>
</section>
<!-- ============== NEWSLETTER ============== -->
<section class="mt-16">
<div class="relative overflow-hidden bg-accent-grad text-ink-on-dark p-12 px-14">
<svg width="280" height="280" viewBox="0 0 280 280" class="absolute -right-10 -top-10 opacity-[0.07]">
<rect x="20" y="20" width="240" height="240" stroke="white" stroke-width="1" fill="none" />
<rect x="50" y="50" width="180" height="180" stroke="white" stroke-width="1" fill="none" />
<rect x="80" y="80" width="120" height="120" stroke="white" stroke-width="1" fill="none" />
</svg>
<div class="relative grid gap-12" style="grid-template-columns:1.1fr 1fr;">
<div>
<div class="eyebrow mb-3" style="color:#9BD5B2;letter-spacing:0.22em;">REDAKTIONELL KURATIERT</div>
<h2 class="font-serif text-[30px] font-semibold m-0 leading-[1.18] tracking-[-0.4px] mb-4 max-w-[460px] text-white">
Themen-Updates für Fachjournalisten und Recherche
</h2>
<p class="text-[14px] leading-[1.6] text-white/75 max-w-[440px] m-0 mb-6">
Themen-Schwerpunkte, Archiv-Funde und Pressetermine — wöchentlich, branchenspezifisch oder beides. Keine Tages-Push, keine Werbung.
</p>
<div class="flex mb-3.5 max-w-[460px]">
<input type="email" placeholder="Ihre E-Mail-Adresse"
class="flex-1 px-4 py-3.5 text-[14px] bg-white/[0.08] border border-white/[0.18] text-white outline-none rounded-none placeholder-white/40" />
<button class="px-[22px] py-3.5 text-[13px] font-semibold bg-white text-accent whitespace-nowrap rounded-none hover:bg-bg">
Kostenlos abonnieren →
</button>
</div>
<div class="text-[11px] text-white/50">Über 38.000 Abonnenten · Datenschutz nach DSGVO</div>
</div>
<div class="flex flex-col gap-2.5 self-stretch">
<label class="flex items-start gap-3.5 px-4 py-3.5 bg-white/[0.08] border border-white/40 cursor-pointer">
<span class="w-[18px] h-[18px] flex-shrink-0 mt-0.5 bg-white border border-white flex items-center justify-center">
<svg width="10" height="10" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-6" stroke="#1F4D3A" stroke-width="2" /></svg>
</span>
<div class="flex-1">
<div class="text-[13.5px] font-semibold text-white">Wochenrückblick Themen</div>
<div class="text-[11.5px] text-white/55 mt-0.5">Sonntags · 18:00 Uhr · Schwerpunkt der Woche</div>
</div>
</label>
<label class="flex items-start gap-3.5 px-4 py-3.5 border border-white/10 cursor-pointer">
<span class="w-[18px] h-[18px] flex-shrink-0 mt-0.5 border border-white/30"></span>
<div class="flex-1">
<div class="text-[13.5px] font-medium text-white">Archiv-Fund des Monats</div>
<div class="text-[11.5px] text-white/55 mt-0.5">Erster Montag im Monat · Themen-Klassiker</div>
</div>
</label>
<label class="flex items-start gap-3.5 px-4 py-3.5 bg-white/[0.08] border border-white/40 cursor-pointer">
<span class="w-[18px] h-[18px] flex-shrink-0 mt-0.5 bg-white border border-white flex items-center justify-center">
<svg width="10" height="10" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-6" stroke="#1F4D3A" stroke-width="2" /></svg>
</span>
<div class="flex-1">
<div class="text-[13.5px] font-semibold text-white">Energie &amp; Klima</div>
<div class="text-[11.5px] text-white/55 mt-0.5">Branchen-Filter · ca. 1× pro Woche</div>
</div>
</label>
<label class="flex items-start gap-3.5 px-4 py-3.5 border border-white/10 cursor-pointer">
<span class="w-[18px] h-[18px] flex-shrink-0 mt-0.5 border border-white/30"></span>
<div class="flex-1">
<div class="text-[13.5px] font-medium text-white">Pressetermine-Vorschau</div>
<div class="text-[11.5px] text-white/55 mt-0.5">Sonntags · Termine der Folgewoche</div>
</div>
</label>
</div>
</div>
</div>
</section>
</main>
<!-- ============== HUB-ÜBERGANGS-BLOCK (identisch zwischen Brands) ============== -->
<section class="bg-hub-grad text-ink-on-dark">
<div class="max-w-layout mx-auto px-8 py-10">
<div class="grid items-center gap-10" style="grid-template-columns:1fr auto;">
<div>
<div class="eyebrow mb-2.5" style="color:#7B8FBF;letter-spacing:0.22em;">PUBLISHER · GEMEINSAMER HUB</div>
<h2 class="font-serif text-[26px] font-semibold m-0 mb-2.5 tracking-[-0.3px] leading-[1.25] text-white">
Veröffentlichen im Publisher-Bereich
</h2>
<p class="text-[13.5px] leading-[1.6] text-white/70 m-0 max-w-[640px]">
Die Einreichung läuft über <span class="text-white font-semibold">presseportale.com</span> — dort verwalten Sie Ihre Mitteilungen, Credits und Newsrooms. Einmaliges Konto, beide Portale (presseecho.de und businessportal24.com) nutzbar.
</p>
</div>
<button class="inline-flex items-center gap-2.5 px-6 py-3.5 text-[14px] font-semibold bg-white text-hub-bg rounded-[2px] hover:bg-bg whitespace-nowrap">
Zum Publisher-Bereich
<svg width="14" height="14" viewBox="0 0 16 16" fill="none">
<path d="M3 13L13 3M13 3H6M13 3v7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
</section>
<!-- ============== FOOTER-QUALITÄTSSTANDARD (identisch zwischen Brands) ============== -->
<section class="max-w-layout mx-auto mt-12 px-8">
<div class="grid items-center gap-7 p-6 bg-bg-card-warm border border-bg-rule-strong"
style="grid-template-columns:auto 1fr auto;">
<div class="w-11 h-11 rounded-full flex-shrink-0 bg-white border border-bg-rule-strong flex items-center justify-center text-accent">
<svg width="22" height="22" 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="1.6" fill="none" />
<path d="M8 12l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div>
<div class="eyebrow mb-1">Redaktioneller Qualitätsstandard</div>
<div class="text-[13.5px] text-ink leading-[1.5] font-medium">
Alle Pressemitteilungen werden redaktionell geprüft.
<span class="text-ink-2 font-normal">
Mindestqualität gewährleistet durch unseren Content-Score — eine Bewertung von Quellenqualität, Verifizierungsstatus und redaktioneller Relevanz.
</span>
</div>
</div>
<a class="text-[12px] font-semibold text-accent whitespace-nowrap underline underline-offset-[3px] decoration-accent/40">
Redaktionsrichtlinien →
</a>
</div>
</section>
<!-- ============== FOOTER ============== -->
<footer class="mt-12 bg-accent-grad text-ink-on-dark">
<div class="max-w-layout mx-auto px-8 py-12 grid gap-10" style="grid-template-columns:1.4fr 1fr 1fr 1fr;">
<div>
<div class="font-serif text-[24px] font-semibold leading-none tracking-[-0.5px] text-white">
presseecho<span style="color:#9BD5B2;">.de</span>
</div>
<div class="eyebrow mt-2 text-[9.5px] tracking-[0.22em]" style="color:#9BD5B2;">
Branchen-Presse · Archiv
</div>
<p class="text-[12.5px] text-white/65 leading-[1.6] mt-4 max-w-[340px]">
Themen-Sammlung und Archiv für Pressemitteilungen aus Deutschland, Österreich und der Schweiz. Über 100.000 Mitteilungen seit 2012, redaktionell erschlossen.
</p>
<!-- Cross-Brand-Hinweis: presseecho zeigt Wirtschaftsschwester sichtbar -->
<div class="mt-5 pt-5 border-t border-white/15 text-[12px] text-white/65">
Wirtschafts-Schwesterportal:
<a class="text-white font-semibold underline underline-offset-[3px] decoration-white/40 ml-1">businessportal24.com</a>
</div>
</div>
<div>
<div class="eyebrow mb-3.5" style="color:#9BD5B2;">Themen &amp; Archiv</div>
<ul class="space-y-2 text-[13px] text-white/75 list-none p-0 m-0">
<li><a href="#">Alle Branchen</a></li>
<li><a href="#">Themen-Schwerpunkte</a></li>
<li><a href="#">Aus dem Archiv</a></li>
<li><a href="#">Newsrooms</a></li>
<li><a href="#">Pressetermine</a></li>
</ul>
</div>
<div>
<div class="eyebrow mb-3.5" style="color:#9BD5B2;">Für Unternehmen</div>
<ul class="space-y-2 text-[13px] text-white/75 list-none p-0 m-0">
<li><a href="#">Veröffentlichen</a></li>
<li><a href="#">Tarife &amp; Pakete</a></li>
<li><a href="#">Verifizierter Newsroom</a></li>
<li><a href="#">API &amp; RSS</a></li>
<li><a href="#">Publisher-Bereich ↗</a></li>
</ul>
</div>
<div>
<div class="eyebrow mb-3.5" style="color:#9BD5B2;">Unternehmen</div>
<ul class="space-y-2 text-[13px] text-white/75 list-none p-0 m-0">
<li><a href="#">Über presseecho.de</a></li>
<li><a href="#">Redaktion</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Datenschutz</a></li>
</ul>
</div>
</div>
<div class="border-t border-white/15">
<div class="max-w-layout mx-auto px-8 py-5 flex items-center justify-between gap-4 text-[11.5px] text-white/55">
<span>© 2026 presseecho.de · Alle Rechte vorbehalten</span>
<span class="flex items-center gap-4">
<a href="#">AGB</a>
<a href="#">Cookie-Einstellungen</a>
<a href="#">DSGVO</a>
</span>
</div>
</div>
</footer>
</div>
</body>
</html>