1268 lines
69 KiB
HTML
1268 lines
69 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>businessportal24 — 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 + 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",
|
||
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",
|
||
},
|
||
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%)",
|
||
"feature-grad": "linear-gradient(135deg,#2A3A2A,#1A2A1A)",
|
||
"hero-grad": "linear-gradient(135deg,#2A3A4A,#1A1F26)",
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</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;
|
||
}
|
||
.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; border-radius:2px;
|
||
}
|
||
.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">
|
||
|
||
<!-- ===================================================================
|
||
ROOT — 1280px Artboard
|
||
=================================================================== -->
|
||
<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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- Suchfeld -->
|
||
<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-semibold text-ink border-b-2 border-brand -mb-px">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>
|
||
<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>
|
||
|
||
<!-- ============== LIVE STRIP — Ad-hoc Ticker + Marktindikator ============== -->
|
||
<div class="bg-topbar-grad text-ink-on-dark">
|
||
<div class="max-w-layout mx-auto px-8 py-2.5 grid items-center gap-5 text-[12.5px]"
|
||
style="grid-template-columns:1fr auto auto;">
|
||
<div class="flex items-center gap-4 overflow-hidden min-w-0">
|
||
<span class="flex items-center gap-1.5 text-[#FF8B6F] font-bold text-[11px] tracking-[0.15em] flex-shrink-0">
|
||
<span class="w-[7px] h-[7px] rounded-full bg-[#FF8B6F] pulse-dot"></span>
|
||
AD-HOC
|
||
</span>
|
||
<div class="flex gap-6 text-[12.5px] overflow-hidden whitespace-nowrap flex-1">
|
||
<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</span>
|
||
</span>
|
||
<span class="inline-flex gap-2 items-baseline">
|
||
<span class="font-mono text-[11px] text-[#8A847B]">14:18</span>
|
||
<span class="text-ink-on-dark">BASF: Restrukturierung in Ludwigshafen abgeschlossen</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">Deutsche Bahn meldet Rekord bei Fernverkehr</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<span class="w-px h-[18px] bg-[#2A2723] flex-shrink-0"></span>
|
||
|
||
<span class="inline-flex items-center gap-2 whitespace-nowrap min-w-[180px] justify-end">
|
||
<span class="text-[#8A847B] font-semibold text-[10.5px] tracking-wider">DAX</span>
|
||
<span class="text-ink-on-dark font-mono text-[12.5px]">18.247</span>
|
||
<span class="text-[#5BC07A] font-semibold text-[11.5px] font-mono">+0,8%</span>
|
||
<svg width="26" height="10" viewBox="0 0 26 10">
|
||
<path d="M0,8 L4,7 L8,5 L12,6 L16,4 L20,3 L24,2" fill="none" stroke="#5BC07A" stroke-width="1.2" />
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============== MAIN ============== -->
|
||
<main class="max-w-layout mx-auto px-8 pt-8 pb-12">
|
||
|
||
<!-- ============== IM FOKUS ============== -->
|
||
<section>
|
||
<header class="flex items-baseline justify-between mb-4">
|
||
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px]">
|
||
Im Fokus
|
||
<span class="text-[16px] text-ink-3 font-normal ml-2">· 🇩🇪 Deutschland</span>
|
||
</h2>
|
||
<div class="eyebrow muted">Mittwoch, 14:42 Uhr · Auswahl der Redaktion</div>
|
||
</header>
|
||
<hr class="rule-strong mb-6" />
|
||
|
||
<div class="grid gap-9" style="grid-template-columns:1.7fr 1fr;">
|
||
|
||
<!-- HERO (statische Anzeige des ersten Rotator-Items) -->
|
||
<article>
|
||
<div class="relative">
|
||
<div class="relative overflow-hidden bg-hero-grad" style="height:500px;">
|
||
<svg width="100%" height="100%" viewBox="0 0 760 500" class="absolute inset-0 opacity-40">
|
||
<defs>
|
||
<pattern id="pat-0" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
|
||
<circle cx="20" cy="20" r="1.5" fill="white" opacity="0.3" />
|
||
</pattern>
|
||
</defs>
|
||
<rect width="760" height="500" fill="url(#pat-0)" />
|
||
<circle cx="600" cy="180" r="120" fill="white" opacity="0.05" />
|
||
<circle cx="160" cy="380" r="80" fill="white" opacity="0.06" />
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="absolute top-6 left-6 flex gap-2">
|
||
<span class="bp-tag">TOP-MELDUNG</span>
|
||
<span class="bp-tag" style="background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);color:white;backdrop-filter:blur(4px);">Audio · 24 min</span>
|
||
</div>
|
||
|
||
<div class="absolute left-0 right-0 bottom-0 px-9 pb-8 pt-[60px] text-white"
|
||
style="background:linear-gradient(180deg,transparent,rgba(0,0,0,0.92));">
|
||
<div class="eyebrow mb-3" style="color:#FF8B6F;">KI & Innovation</div>
|
||
<h1 class="font-serif text-[38px] font-semibold m-0 leading-[1.1] tracking-[-0.7px] max-w-[680px]">
|
||
Die Zukunft der KI im deutschen Mittelstand
|
||
</h1>
|
||
<p class="font-serif text-[15px] leading-[1.5] mt-3.5 max-w-[580px] text-white/85">
|
||
Im exklusiven Interview spricht Dr. Maria Schmidt, Leiterin des KI-Instituts München, über Chancen und Herausforderungen der KI für mittelständische Unternehmen.
|
||
</p>
|
||
<div class="mt-4 flex items-center gap-3.5 text-[12px] text-white/65">
|
||
<span>KI-Institut München</span><span>·</span>
|
||
<span class="font-mono">17.10.2026 · 09:30</span><span>·</span>
|
||
<span>5 Min. Lesezeit</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pagination dots (statisch) -->
|
||
<div class="flex items-center justify-between pt-3.5 px-1 gap-3">
|
||
<div class="flex gap-2 items-center">
|
||
<span class="block h-[3px] w-9 bg-bg-rule-strong relative overflow-hidden">
|
||
<span class="absolute inset-y-0 left-0 bg-brand" style="width:35%;"></span>
|
||
</span>
|
||
<span class="block h-[3px] w-[18px] bg-bg-rule-strong"></span>
|
||
<span class="block h-[3px] w-[18px] bg-bg-rule-strong"></span>
|
||
</div>
|
||
<div class="text-[12px] text-ink-3">
|
||
<span class="text-ink font-semibold">1</span> von 3 Top-Meldungen
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- SIDEBAR — Was sonst zählt -->
|
||
<aside>
|
||
<div class="eyebrow muted mb-3.5">Was sonst zählt</div>
|
||
|
||
<!-- Sub item template (4 Stück) -->
|
||
<article class="px-3.5 py-4 border-t border-bg-rule-strong border-b border-bg-rule">
|
||
<div class="grid items-baseline gap-3 mb-2.5" style="grid-template-columns:32px 1fr auto;">
|
||
<div class="font-serif text-[18px] text-brand font-medium leading-none" style="font-variant-numeric:tabular-nums;">01</div>
|
||
<span class="bp-cat">Energie & Umwelt</span>
|
||
<span class="font-mono text-[11px] text-ink-3">10:42</span>
|
||
</div>
|
||
<div class="grid items-start gap-3" style="grid-template-columns:32px 64px 1fr;">
|
||
<div></div>
|
||
<div class="w-16 h-16 flex-shrink-0 relative overflow-hidden" style="background:linear-gradient(135deg,#3A5A3A,#7BA876);">
|
||
<svg width="64" height="64" viewBox="0 0 64 64" class="absolute inset-0">
|
||
<circle cx="48" cy="20" r="18" fill="rgba(255,255,255,0.08)" />
|
||
<rect x="6" y="40" width="36" height="2" fill="rgba(255,255,255,0.18)" />
|
||
<rect x="6" y="46" width="24" height="2" fill="rgba(255,255,255,0.12)" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-serif text-[15.5px] leading-[1.3] m-0 font-medium tracking-[-0.1px]">
|
||
Energiewende beschleunigt sich: Neue Rekorde bei Erneuerbaren
|
||
</h3>
|
||
<div class="text-[11.5px] text-ink-3 mt-1.5 flex items-center gap-1.5">
|
||
<svg width="10" height="10" viewBox="0 0 11 11" class="text-ok flex-shrink-0">
|
||
<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>GreenPower Deutschland</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="px-3.5 py-4 border-b border-bg-rule">
|
||
<div class="grid items-baseline gap-3 mb-2.5" style="grid-template-columns:32px 1fr auto;">
|
||
<div class="font-serif text-[18px] text-brand font-medium leading-none" style="font-variant-numeric:tabular-nums;">02</div>
|
||
<span class="bp-cat">Finanzen</span>
|
||
<span class="font-mono text-[11px] text-ink-3">08:15</span>
|
||
</div>
|
||
<div class="grid items-start gap-3" style="grid-template-columns:32px 64px 1fr;">
|
||
<div></div>
|
||
<div class="w-16 h-16 flex-shrink-0 relative overflow-hidden" style="background:linear-gradient(135deg,#2A3548,#6B7C95);">
|
||
<svg width="64" height="64" viewBox="0 0 64 64" class="absolute inset-0">
|
||
<circle cx="48" cy="20" r="18" fill="rgba(255,255,255,0.08)" />
|
||
<rect x="6" y="40" width="36" height="2" fill="rgba(255,255,255,0.18)" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-serif text-[15.5px] leading-[1.3] m-0 font-medium">
|
||
FinTech-Startup PaymentFlow sichert sich 45 Mio. Euro
|
||
</h3>
|
||
<div class="text-[11.5px] text-ink-3 mt-1.5 flex items-center gap-1.5">
|
||
<svg width="10" height="10" viewBox="0 0 11 11" class="text-ok flex-shrink-0">
|
||
<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>PaymentFlow GmbH</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="px-3.5 py-4 border-b border-bg-rule">
|
||
<div class="grid items-baseline gap-3 mb-2.5" style="grid-template-columns:32px 1fr auto;">
|
||
<div class="font-serif text-[18px] text-brand font-medium leading-none" style="font-variant-numeric:tabular-nums;">03</div>
|
||
<span class="bp-cat">Industrie</span>
|
||
<span class="font-mono text-[11px] text-ink-3">07:00</span>
|
||
</div>
|
||
<div class="grid items-start gap-3" style="grid-template-columns:32px 64px 1fr;">
|
||
<div></div>
|
||
<div class="w-16 h-16 flex-shrink-0 relative overflow-hidden" style="background:linear-gradient(135deg,#3A2A22,#9B6B52);"></div>
|
||
<div>
|
||
<h3 class="font-serif text-[15.5px] leading-[1.3] m-0 font-medium">
|
||
Deutsche Unternehmen investieren 15 Mrd. in Automatisierung
|
||
</h3>
|
||
<div class="text-[11.5px] text-ink-3 mt-1.5 flex items-center gap-1.5">
|
||
<svg width="10" height="10" viewBox="0 0 11 11" class="text-ok flex-shrink-0">
|
||
<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>TechVision Analytics</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="px-3.5 py-4 border-b border-bg-rule">
|
||
<div class="grid items-baseline gap-3 mb-2.5" style="grid-template-columns:32px 1fr auto;">
|
||
<div class="font-serif text-[18px] text-brand font-medium leading-none" style="font-variant-numeric:tabular-nums;">04</div>
|
||
<span class="bp-cat">Mobilität</span>
|
||
<span class="font-mono text-[11px] text-ink-3">Gestern</span>
|
||
</div>
|
||
<div class="grid items-start gap-3" style="grid-template-columns:32px 64px 1fr;">
|
||
<div></div>
|
||
<div class="w-16 h-16 flex-shrink-0 relative overflow-hidden" style="background:linear-gradient(135deg,#1F2A3A,#5B7A99);"></div>
|
||
<div>
|
||
<h3 class="font-serif text-[15.5px] leading-[1.3] m-0 font-medium">
|
||
VW eröffnet Batteriewerk in Salzgitter — 4.000 Arbeitsplätze
|
||
</h3>
|
||
<div class="text-[11.5px] text-ink-3 mt-1.5 flex items-center gap-1.5">
|
||
<svg width="10" height="10" viewBox="0 0 11 11" class="text-ok flex-shrink-0">
|
||
<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>Volkswagen AG</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Sidebar-Anzeige als getrennter Block (Brief 1) -->
|
||
<div class="mt-4">
|
||
<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">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="grid items-start gap-3" style="grid-template-columns:64px 1fr;">
|
||
<div class="w-16 h-16 flex-shrink-0 relative overflow-hidden opacity-85" style="background:linear-gradient(135deg,#3A2818,#A88466);"></div>
|
||
<div>
|
||
<div class="text-[9.5px] font-bold tracking-[0.16em] text-[#6E6862] uppercase mb-1">
|
||
Logistik & Transport
|
||
</div>
|
||
<h3 class="font-serif text-[15.5px] leading-[1.3] m-0 font-medium" style="color:#3A332B;">
|
||
DHL Express erweitert Same-Day-Netz auf 24 deutsche Großstädte
|
||
</h3>
|
||
<div class="text-[11.5px] mt-1.5" style="color:#6E6862;">
|
||
Deutsche Post DHL Group
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== AKTUELLE MELDUNGEN ============== -->
|
||
<section class="mt-16 grid gap-9" style="grid-template-columns:1.7fr 1fr;">
|
||
|
||
<!-- Linke Spalte: Feed -->
|
||
<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]">Aktuelle Meldungen</h2>
|
||
<div class="flex gap-[18px] text-[12.5px] text-ink-3">
|
||
<a href="#" class="text-ink border-b-[1.5px] border-brand pb-0.5">Alle</a>
|
||
<a href="#">Heute</a>
|
||
<a href="#">Diese Woche</a>
|
||
</div>
|
||
</header>
|
||
<hr class="rule-strong" />
|
||
|
||
<!-- Featured -->
|
||
<article class="py-6 border-b border-bg-rule grid gap-6" style="grid-template-columns:240px 1fr;">
|
||
<div class="relative overflow-hidden bg-feature-grad" style="width:240px;height:160px;">
|
||
<svg width="100%" height="100%" viewBox="0 0 240 160" class="absolute inset-0">
|
||
<g opacity="0.5"><line x1="40" y1="55" x2="40" y2="150" stroke="#A8C8A8" stroke-width="1.8" /><circle cx="40" cy="55" r="3" fill="#C4DCC4" /><line x1="40" y1="55" x2="62" y2="44" stroke="#C4DCC4" stroke-width="1.5" /><line x1="40" y1="55" x2="29" y2="72" stroke="#C4DCC4" stroke-width="1.5" /><line x1="40" y1="55" x2="29" y2="40" stroke="#C4DCC4" stroke-width="1.5" /></g>
|
||
<g opacity="0.65"><line x1="100" y1="55" x2="100" y2="150" stroke="#A8C8A8" stroke-width="1.8" /><circle cx="100" cy="55" r="3" fill="#C4DCC4" /></g>
|
||
<g opacity="0.8"><line x1="160" y1="55" x2="160" y2="150" stroke="#A8C8A8" stroke-width="1.8" /><circle cx="160" cy="55" r="3" fill="#C4DCC4" /></g>
|
||
<g opacity="0.95"><line x1="210" y1="55" x2="210" y2="150" stroke="#A8C8A8" stroke-width="1.8" /><circle cx="210" cy="55" r="3" fill="#C4DCC4" /></g>
|
||
</svg>
|
||
<span class="bp-tag absolute top-2.5 left-2.5">Top-Meldung</span>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between items-baseline mb-2">
|
||
<span class="bp-cat">Bauen · Immobilien</span>
|
||
<span class="font-mono text-[11.5px] text-ink-3">14:18</span>
|
||
</div>
|
||
<h3 class="font-serif text-[24px] leading-[1.2] m-0 font-semibold tracking-[-0.3px]">
|
||
Immobilienmarkt 2025: Experten prognostizieren Trendwende bei Kaufpreisen
|
||
</h3>
|
||
<p class="font-serif text-[14px] text-ink-2 leading-[1.5] mt-2.5">
|
||
Nach 18 Monaten der Konsolidierung deuten Frühindikatoren auf eine Erholung hin. ImmoConsult-Studie analysiert 240 Märkte in DACH.
|
||
</p>
|
||
<div class="mt-3 text-[11.5px] text-ink-3 flex items-center gap-1.5">
|
||
<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>
|
||
ImmoConsult Deutschland · München · 5 Min. Lesezeit
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Row item helper template — alle Meldungen -->
|
||
<a class="grid items-baseline gap-4 py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 100px 1fr;">
|
||
<span class="font-mono text-[12px] text-ink-3">13:42</span>
|
||
<span class="bp-cat">Tourismus</span>
|
||
<div>
|
||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium flex items-baseline gap-2 flex-wrap">
|
||
<span>Nachhaltiger Tourismus auf Erfolgskurs: Buchungen steigen um 45 %</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 bg-brand/[0.04] px-1.5 py-px whitespace-nowrap">
|
||
<svg width="9" height="9" viewBox="0 0 12 12" class="flex-shrink-0"><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">GreenTravel Consulting · Berlin</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="grid items-baseline gap-4 py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 100px 1fr;">
|
||
<span class="font-mono text-[12px] text-ink-3">12:55</span>
|
||
<span class="bp-cat">Bildung</span>
|
||
<div>
|
||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium">
|
||
Digitalisierung im Bildungssektor: Schulen erhalten 2 Mrd. Euro Förderung
|
||
</div>
|
||
<div class="text-[11px] text-ink-3 mt-1">EduTech Initiative · Frankfurt</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="grid items-baseline gap-4 py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 100px 1fr;">
|
||
<span class="font-mono text-[12px] text-ink-3">11:20</span>
|
||
<span class="bp-cat">Medien</span>
|
||
<div>
|
||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium">
|
||
Medienbranche im Umbruch: Streaming-Dienste überholen klassisches TV
|
||
</div>
|
||
<div class="text-[11px] text-ink-3 mt-1">MediaWatch Analytics · Hamburg</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="grid items-baseline gap-4 py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 100px 1fr;">
|
||
<span class="font-mono text-[12px] text-ink-3">10:48</span>
|
||
<span class="bp-cat">Handel</span>
|
||
<div>
|
||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium flex items-baseline gap-2 flex-wrap">
|
||
<span>Einzelhandel setzt auf KI: Personalisierte Shopping-Erlebnisse werden Standard</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 bg-brand/[0.04] px-1.5 py-px whitespace-nowrap">
|
||
<svg width="9" height="9" viewBox="0 0 12 12" class="flex-shrink-0"><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">RetailTech Innovations · Köln</div>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- IN-FEED-ANZEIGE 1 (nach Position 5) -->
|
||
<div class="-mx-4 my-2">
|
||
<div class="flex items-center gap-2.5 px-4">
|
||
<span class="h-px flex-1" style="background:#C8BDA8;"></span>
|
||
<span class="text-[9px] font-bold tracking-[0.22em] uppercase" style="color:#8A847B;">Anzeige</span>
|
||
<span class="h-px flex-1" style="background:#C8BDA8;"></span>
|
||
</div>
|
||
<a class="grid items-baseline gap-4 px-4 py-4 bg-bg-card-warm" style="grid-template-columns:60px 100px 1fr;">
|
||
<span class="font-mono text-[12px]" style="color:#6E6862;">12:14</span>
|
||
<span class="text-[9.5px] font-bold tracking-[0.14em] uppercase" style="color:#6E6862;">Cloud · Software</span>
|
||
<div>
|
||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium" style="color:#3A332B;">
|
||
Microsoft Azure: Neue EU-Region Frankfurt mit DSGVO-zertifizierter KI-Infrastruktur
|
||
</div>
|
||
<div class="text-[11px] mt-1" style="color:#6E6862;">Microsoft Deutschland GmbH</div>
|
||
</div>
|
||
</a>
|
||
<div class="flex items-center gap-2.5 px-4">
|
||
<span class="h-px flex-1" style="background:#C8BDA8;"></span>
|
||
<span class="text-[9px] font-bold tracking-[0.22em] uppercase" style="color:#8A847B;">Ende Anzeige</span>
|
||
<span class="h-px flex-1" style="background:#C8BDA8;"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<a class="grid items-baseline gap-4 py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 100px 1fr;">
|
||
<span class="font-mono text-[12px] text-ink-3">09:33</span>
|
||
<span class="bp-cat">Gesundheit</span>
|
||
<div>
|
||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium">
|
||
Telemedizin-Boom: 3 Millionen Online-Sprechstunden im letzten Quartal
|
||
</div>
|
||
<div class="text-[11px] text-ink-3 mt-1">HealthConnect Digital · Stuttgart</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="grid items-baseline gap-4 py-3.5 border-b border-bg-rule" style="grid-template-columns:60px 100px 1fr;">
|
||
<span class="font-mono text-[12px] text-ink-3">08:15</span>
|
||
<span class="bp-cat">Mobilität</span>
|
||
<div>
|
||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium">
|
||
E-Mobilität: Ladeinfrastruktur wächst um 38 % gegenüber Vorjahr
|
||
</div>
|
||
<div class="text-[11px] text-ink-3 mt-1">eMobility Verband · Düsseldorf</div>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- IN-FEED-ANZEIGE 2 (Versicherung) -->
|
||
<div class="-mx-4 my-2">
|
||
<div class="flex items-center gap-2.5 px-4">
|
||
<span class="h-px flex-1" style="background:#C8BDA8;"></span>
|
||
<span class="text-[9px] font-bold tracking-[0.22em] uppercase" style="color:#8A847B;">Anzeige</span>
|
||
<span class="h-px flex-1" style="background:#C8BDA8;"></span>
|
||
</div>
|
||
<a class="grid items-baseline gap-4 px-4 py-4 bg-bg-card-warm" style="grid-template-columns:60px 100px 1fr;">
|
||
<span class="font-mono text-[12px]" style="color:#6E6862;">09:46</span>
|
||
<span class="text-[9.5px] font-bold tracking-[0.14em] uppercase" style="color:#6E6862;">Versicherung</span>
|
||
<div>
|
||
<div class="font-serif text-[15.5px] leading-[1.3] font-medium" style="color:#3A332B;">
|
||
Allianz erweitert Cyber-Police für Mittelstand — Schutz gegen KI-basierte Angriffe
|
||
</div>
|
||
<div class="text-[11px] mt-1" style="color:#6E6862;">Allianz Versicherungs-AG</div>
|
||
</div>
|
||
</a>
|
||
<div class="flex items-center gap-2.5 px-4">
|
||
<span class="h-px flex-1" style="background:#C8BDA8;"></span>
|
||
<span class="text-[9px] font-bold tracking-[0.22em] uppercase" style="color:#8A847B;">Ende Anzeige</span>
|
||
<span class="h-px flex-1" style="background:#C8BDA8;"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-center mt-7">
|
||
<button class="inline-flex items-center gap-2 px-[18px] 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">
|
||
Weitere 240 Meldungen anzeigen →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rechte Spalte: Meistgelesen / CTA / Newsrooms -->
|
||
<aside class="flex flex-col gap-9">
|
||
|
||
<!-- Meistgelesen -->
|
||
<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]">Meistgelesen</h2>
|
||
</header>
|
||
<hr class="rule-strong mb-1" />
|
||
|
||
<div class="py-3.5 border-b border-bg-rule">
|
||
<div class="grid gap-2.5 items-baseline 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">FinTech-Startup PaymentFlow sichert sich 45 Mio. Euro</div>
|
||
<span class="font-mono text-[11px] text-ink-3">12.428</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 gap-2.5 items-baseline 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">Energiewende: Neue Rekorde bei Erneuerbaren</div>
|
||
<span class="font-mono text-[11px] text-ink-3">9.831</span>
|
||
</div>
|
||
<div class="ml-[42px] h-[3px] bg-bg-rule"><div class="h-full bg-brand" style="width:79%;"></div></div>
|
||
</div>
|
||
|
||
<div class="py-3.5 border-b border-bg-rule">
|
||
<div class="grid gap-2.5 items-baseline 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">Immobilienmarkt 2025: Trendwende bei Kaufpreisen</div>
|
||
<span class="font-mono text-[11px] text-ink-3">7.104</span>
|
||
</div>
|
||
<div class="ml-[42px] h-[3px] bg-bg-rule"><div class="h-full bg-brand" style="width:57%;"></div></div>
|
||
</div>
|
||
|
||
<div class="py-3.5">
|
||
<div class="grid gap-2.5 items-baseline 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">Telemedizin-Boom: 3 Mio. Online-Sprechstunden</div>
|
||
<span class="font-mono text-[11px] text-ink-3">5.298</span>
|
||
</div>
|
||
<div class="ml-[42px] h-[3px] bg-bg-rule"><div class="h-full bg-brand" style="width:43%;"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CTA -->
|
||
<div class="bg-topbar-grad text-ink-on-dark p-6">
|
||
<div class="eyebrow mb-2" style="color:#FF8B6F;">Für Unternehmen</div>
|
||
<h3 class="font-serif text-[20px] font-semibold m-0 mb-2 tracking-[-0.2px] leading-[1.2] text-white">
|
||
Veröffentlichen Sie Ihre Pressemitteilung
|
||
</h3>
|
||
<p class="text-[12.5px] leading-[1.5] m-0 mb-4 text-white/85">
|
||
Reichweite in DACH · Redaktionelle Prüfung · Strukturierte Distribution
|
||
</p>
|
||
<button class="w-full inline-flex items-center justify-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold bg-brand text-white rounded-[2px] hover:bg-brand-deep">
|
||
Jetzt einreichen →
|
||
</button>
|
||
<button class="flex items-center justify-center gap-1.5 w-full mt-3 py-2 text-[12px] font-medium text-white/80 hover:text-white underline underline-offset-[3px] decoration-white/30">
|
||
Tarife & Pakete ansehen
|
||
<svg width="10" height="10" viewBox="0 0 12 12" fill="none">
|
||
<path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Aktive 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] leading-[1.2]">Aktive Newsrooms</h2>
|
||
<span class="eyebrow muted text-[10px]">Heute</span>
|
||
</header>
|
||
<hr class="rule-strong mb-1" />
|
||
|
||
<!-- Newsroom-Eintrag (6×) -->
|
||
<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 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-0.5"><span class="font-mono">18</span> Meldungen letzte 7 Tage</div>
|
||
</div>
|
||
<span class="inline-flex items-center gap-1.5 text-[10.5px] font-semibold text-ink-2 px-2 py-0.5 bg-brand/[0.06] border border-brand/20 whitespace-nowrap">
|
||
<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 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-0.5"><span class="font-mono">14</span> Meldungen letzte 7 Tage</div>
|
||
</div>
|
||
<span class="inline-flex items-center gap-1.5 text-[10.5px] font-semibold text-ink-2 px-2 py-0.5 bg-brand/[0.06] border border-brand/20 whitespace-nowrap">
|
||
<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 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-0.5"><span class="font-mono">11</span> Meldungen letzte 7 Tage</div>
|
||
</div>
|
||
<span class="inline-flex items-center gap-1.5 text-[10.5px] font-semibold text-ink-2 px-2 py-0.5 bg-brand/[0.06] border border-brand/20 whitespace-nowrap">
|
||
<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 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-0.5"><span class="font-mono">16</span> Meldungen letzte 7 Tage</div>
|
||
</div>
|
||
<span class="inline-flex items-center gap-1.5 text-[10.5px] font-semibold text-ink-2 px-2 py-0.5 bg-brand/[0.06] border border-brand/20 whitespace-nowrap">
|
||
<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 text-white flex items-center justify-center text-[14px] font-bold font-serif" style="background:#E20074;">T</div>
|
||
<div>
|
||
<div class="text-[13.5px] font-semibold leading-[1.2]">Deutsche Telekom</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.5 text-[10.5px] font-semibold text-ink-2 px-2 py-0.5 bg-brand/[0.06] border border-brand/20 whitespace-nowrap">
|
||
<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 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]">Allianz SE</div>
|
||
<div class="text-[11px] text-ink-3 mt-0.5"><span class="font-mono">8</span> Meldungen letzte 7 Tage</div>
|
||
</div>
|
||
<span class="inline-flex items-center gap-1.5 text-[10.5px] font-semibold text-ink-2 px-2 py-0.5 bg-brand/[0.06] border border-brand/20 whitespace-nowrap">
|
||
<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 Newsrooms anzeigen →</a>
|
||
</div>
|
||
</aside>
|
||
</section>
|
||
|
||
<!-- ============== BRANCHEN-SPOTLIGHT ============== -->
|
||
<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]">
|
||
Heute im Fokus <span class="text-brand">· Energie & Klima</span>
|
||
</h2>
|
||
<div class="eyebrow muted">Aktualisiert 14:38 Uhr · 47 Meldungen heute</div>
|
||
</header>
|
||
<hr class="rule-strong" />
|
||
|
||
<!-- 3 Stat-Spalten -->
|
||
<div class="grid grid-cols-3 border-b border-bg-rule">
|
||
<div class="px-6 py-5 border-r border-bg-rule">
|
||
<div class="eyebrow muted mb-2">Meldungen heute</div>
|
||
<div class="font-serif text-[32px] font-semibold leading-none tracking-[-0.5px]">47</div>
|
||
<div class="text-[11.5px] text-ink-3 mt-1.5">+18 ggü. Wochenschnitt</div>
|
||
</div>
|
||
<div class="px-6 py-5 border-r border-bg-rule">
|
||
<div class="eyebrow muted mb-2">Investitionsvolumen</div>
|
||
<div class="font-serif text-[32px] font-semibold leading-none tracking-[-0.5px]">€8,4 Mrd.</div>
|
||
<div class="text-[11.5px] text-ink-3 mt-1.5">Q4 2025 angekündigt</div>
|
||
</div>
|
||
<div class="px-6 py-5">
|
||
<div class="eyebrow muted mb-2">Aktive Unternehmen</div>
|
||
<div class="font-serif text-[32px] font-semibold leading-none tracking-[-0.5px]">23</div>
|
||
<div class="text-[11.5px] text-ink-3 mt-1.5">in dieser Branche heute</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid gap-9 mt-6" style="grid-template-columns:1.7fr 1fr;">
|
||
|
||
<!-- Featured Spotlight-Meldungen -->
|
||
<div>
|
||
<a class="grid items-baseline gap-4 py-4 border-b border-bg-rule" style="grid-template-columns:60px 100px 1fr;">
|
||
<span class="font-mono text-[12px] text-ink-3">14:12</span>
|
||
<span class="bp-cat">Energie</span>
|
||
<div>
|
||
<div class="font-serif text-[16px] leading-[1.3] font-medium tracking-[-0.1px]">
|
||
RWE startet 1,8 GW Offshore-Windpark vor Helgoland — größtes Projekt in der Nordsee 2025
|
||
</div>
|
||
<div class="text-[11.5px] text-ink-3 mt-1 flex items-center gap-1.5">
|
||
<svg width="10" height="10" 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>
|
||
RWE AG · Essen · 4 Min.
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="grid items-baseline gap-4 py-4 border-b border-bg-rule" style="grid-template-columns:60px 100px 1fr;">
|
||
<span class="font-mono text-[12px] text-ink-3">12:28</span>
|
||
<span class="bp-cat">Energie</span>
|
||
<div>
|
||
<div class="font-serif text-[16px] leading-[1.3] font-medium tracking-[-0.1px]">
|
||
EnBW unterzeichnet Wasserstoff-Lieferabkommen mit Air Liquide
|
||
</div>
|
||
<div class="text-[11.5px] text-ink-3 mt-1 flex items-center gap-1.5">
|
||
<svg width="10" height="10" 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>
|
||
EnBW Energie · Karlsruhe · 3 Min.
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="grid items-baseline gap-4 py-4 border-b border-bg-rule" style="grid-template-columns:60px 100px 1fr;">
|
||
<span class="font-mono text-[12px] text-ink-3">10:55</span>
|
||
<span class="bp-cat">Klima</span>
|
||
<div>
|
||
<div class="font-serif text-[16px] leading-[1.3] font-medium tracking-[-0.1px]">
|
||
Stadtwerke München erreichen 100 % Ökostrom-Ziel für Privatkunden
|
||
</div>
|
||
<div class="text-[11.5px] text-ink-3 mt-1 flex items-center gap-1.5">
|
||
<svg width="10" height="10" 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>
|
||
SWM · München · 2 Min.
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Studien-Download -->
|
||
<aside>
|
||
<div class="bg-bg-card-warm p-6 border-t-[3px] border-brand">
|
||
<div class="eyebrow mb-2.5">STUDIE · ENERGIE</div>
|
||
<h3 class="font-serif text-[20px] 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-3.5">
|
||
Fraunhofer-Institut für Solare Energiesysteme<br>
|
||
<span class="font-mono text-[11px]">PDF · 84 Seiten · Veröffentlicht 11. Nov 2025</span>
|
||
</div>
|
||
<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:#6E6862;">
|
||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" class="flex-shrink-0" style="color:#8A847B;">
|
||
<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>
|
||
|
||
<!-- ============== TERMINE & EVENTS ============== -->
|
||
<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]">Termine & Events</h2>
|
||
<span class="eyebrow muted">Diese Woche im Überblick</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-brand 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(204,55,51,0.025);">
|
||
<span class="absolute top-3.5 right-3.5 w-1.5 h-1.5 rounded-full bg-brand"></span>
|
||
<div class="flex items-baseline gap-1.5 mb-2.5">
|
||
<span class="eyebrow font-bold">Heute</span>
|
||
<span class="text-[10.5px] text-ink-3 font-mono">06. Mai</span>
|
||
</div>
|
||
<div class="text-[10.5px] tracking-[0.06em] uppercase font-bold text-ink-2 mb-1.5">Quartalszahlen</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(204,55,51,0.025);">
|
||
<div class="flex items-baseline gap-1.5 mb-2.5">
|
||
<span class="eyebrow font-bold">Heute</span>
|
||
<span class="text-[10.5px] text-ink-3 font-mono">06. Mai</span>
|
||
</div>
|
||
<div class="text-[10.5px] tracking-[0.06em] 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">
|
||
<span class="absolute top-3.5 right-3.5 w-1.5 h-1.5 rounded-full bg-brand"></span>
|
||
<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">07. Mai</span>
|
||
</div>
|
||
<div class="text-[10.5px] tracking-[0.06em] uppercase font-bold text-ink-2 mb-1.5">Pressekonferenz</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">07. Mai</span>
|
||
</div>
|
||
<div class="text-[10.5px] tracking-[0.06em] uppercase font-bold text-ink-2 mb-1.5">Quartalszahlen</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">08. Mai</span>
|
||
</div>
|
||
<div class="text-[10.5px] tracking-[0.06em] uppercase font-bold text-ink-2 mb-1.5">Konferenz</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>
|
||
<div class="mt-2 text-[9.5px] tracking-[0.08em] uppercase font-semibold" style="color:#8A847B;">Anzeige</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">09. Mai</span>
|
||
</div>
|
||
<div class="text-[10.5px] tracking-[0.06em] 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">
|
||
<span class="absolute top-3.5 right-3.5 w-1.5 h-1.5 rounded-full bg-brand"></span>
|
||
<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">12. Mai</span>
|
||
</div>
|
||
<div class="text-[10.5px] tracking-[0.06em] uppercase font-bold text-ink-2 mb-1.5">Quartalszahlen</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-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]">Branchen-Index</h2>
|
||
<span class="eyebrow muted">Letzte 7 Tage</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-5 py-[18px] border-r border-bg-rule">
|
||
<div class="flex justify-between items-baseline mb-2">
|
||
<span class="text-[14px] font-semibold">Technologie</span>
|
||
<span class="font-mono text-[12px] text-gain font-semibold">+12</span>
|
||
</div>
|
||
<div class="flex items-baseline gap-2 mb-2">
|
||
<span class="font-serif text-[22px] font-semibold tracking-[-0.3px]">142</span>
|
||
<span class="text-[11px] text-ink-3">Meldungen</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-5 py-[18px] border-r border-bg-rule">
|
||
<div class="flex justify-between items-baseline mb-2">
|
||
<span class="text-[14px] font-semibold">Finanzen</span>
|
||
<span class="font-mono text-[12px] text-gain font-semibold">+5</span>
|
||
</div>
|
||
<div class="flex items-baseline gap-2 mb-2">
|
||
<span class="font-serif text-[22px] font-semibold tracking-[-0.3px]">98</span>
|
||
<span class="text-[11px] text-ink-3">Meldungen</span>
|
||
</div>
|
||
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-gain" style="width:69%;"></div></div>
|
||
</a>
|
||
|
||
<a class="block px-5 py-[18px] border-r border-bg-rule">
|
||
<div class="flex justify-between items-baseline mb-2">
|
||
<span class="text-[14px] font-semibold">Industrie</span>
|
||
<span class="font-mono text-[12px] text-loss font-semibold">-2</span>
|
||
</div>
|
||
<div class="flex items-baseline gap-2 mb-2">
|
||
<span class="font-serif text-[22px] font-semibold tracking-[-0.3px]">87</span>
|
||
<span class="text-[11px] text-ink-3">Meldungen</span>
|
||
</div>
|
||
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-brand" style="width:61%;"></div></div>
|
||
</a>
|
||
|
||
<a class="block px-5 py-[18px]">
|
||
<div class="flex justify-between items-baseline mb-2">
|
||
<span class="text-[14px] font-semibold">Energie</span>
|
||
<span class="font-mono text-[12px] text-gain font-semibold">+18</span>
|
||
</div>
|
||
<div class="flex items-baseline gap-2 mb-2">
|
||
<span class="font-serif text-[22px] font-semibold tracking-[-0.3px]">64</span>
|
||
<span class="text-[11px] text-ink-3">Meldungen</span>
|
||
</div>
|
||
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-gain" style="width:45%;"></div></div>
|
||
</a>
|
||
|
||
<a class="block px-5 py-[18px] border-r border-t border-bg-rule">
|
||
<div class="flex justify-between items-baseline mb-2">
|
||
<span class="text-[14px] font-semibold">Gesundheit</span>
|
||
<span class="font-mono text-[12px] text-gain font-semibold">+3</span>
|
||
</div>
|
||
<div class="flex items-baseline gap-2 mb-2">
|
||
<span class="font-serif text-[22px] font-semibold tracking-[-0.3px]">51</span>
|
||
<span class="text-[11px] text-ink-3">Meldungen</span>
|
||
</div>
|
||
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-gain" style="width:36%;"></div></div>
|
||
</a>
|
||
|
||
<a class="block px-5 py-[18px] border-r border-t border-bg-rule">
|
||
<div class="flex justify-between items-baseline mb-2">
|
||
<span class="text-[14px] font-semibold">Mobilität</span>
|
||
<span class="font-mono text-[12px] text-gain font-semibold">+9</span>
|
||
</div>
|
||
<div class="flex items-baseline gap-2 mb-2">
|
||
<span class="font-serif text-[22px] font-semibold tracking-[-0.3px]">44</span>
|
||
<span class="text-[11px] text-ink-3">Meldungen</span>
|
||
</div>
|
||
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-gain" style="width:31%;"></div></div>
|
||
</a>
|
||
|
||
<a class="block px-5 py-[18px] border-r border-t border-bg-rule">
|
||
<div class="flex justify-between items-baseline mb-2">
|
||
<span class="text-[14px] font-semibold">Handel</span>
|
||
<span class="font-mono text-[12px] text-loss font-semibold">-1</span>
|
||
</div>
|
||
<div class="flex items-baseline gap-2 mb-2">
|
||
<span class="font-serif text-[22px] font-semibold tracking-[-0.3px]">38</span>
|
||
<span class="text-[11px] text-ink-3">Meldungen</span>
|
||
</div>
|
||
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-brand" style="width:27%;"></div></div>
|
||
</a>
|
||
|
||
<a class="block px-5 py-[18px] border-t border-bg-rule">
|
||
<div class="flex justify-between items-baseline mb-2">
|
||
<span class="text-[14px] font-semibold">Immobilien</span>
|
||
<span class="font-mono text-[12px] text-gain font-semibold">+4</span>
|
||
</div>
|
||
<div class="flex items-baseline gap-2 mb-2">
|
||
<span class="font-serif text-[22px] font-semibold tracking-[-0.3px]">32</span>
|
||
<span class="text-[11px] text-ink-3">Meldungen</span>
|
||
</div>
|
||
<div class="h-[3px] bg-bg-rule"><div class="h-full bg-gain" style="width:22%;"></div></div>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== NEWSLETTER ============== -->
|
||
<section class="mt-16">
|
||
<div class="relative overflow-hidden bg-topbar-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.06]">
|
||
<circle cx="140" cy="140" r="120" stroke="white" stroke-width="1" fill="none" />
|
||
<circle cx="140" cy="140" r="80" stroke="white" stroke-width="1" fill="none" />
|
||
<circle cx="140" cy="140" r="40" 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:#FF8B6F;">Bleiben Sie informiert</div>
|
||
<h2 class="font-serif text-[30px] font-semibold m-0 leading-[1.18] tracking-[-0.4px] mb-3.5 max-w-[460px] text-white">
|
||
Pressemeldungen, kuratiert in Ihren Posteingang
|
||
</h2>
|
||
<p class="text-[14px] leading-[1.55] text-white/70 max-w-[440px] m-0 mb-6">
|
||
Die wichtigsten Meldungen aus DACH — täglich, wöchentlich oder branchenspezifisch. Keine Werbung, jederzeit kündbar.
|
||
</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-brand text-white whitespace-nowrap rounded-none hover:bg-brand-deep">
|
||
Kostenlos abonnieren →
|
||
</button>
|
||
</div>
|
||
<div class="text-[11px] text-white/50">Über 84.000 Abonnenten · Datenschutz nach DSGVO</div>
|
||
</div>
|
||
|
||
<!-- Newsletter-Optionen -->
|
||
<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.06] border border-brand/40 cursor-pointer">
|
||
<span class="w-[18px] h-[18px] flex-shrink-0 mt-0.5 bg-brand border border-brand 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="white" stroke-width="2" /></svg>
|
||
</span>
|
||
<div class="flex-1">
|
||
<div class="text-[13.5px] font-semibold text-white">Tageszusammenfassung</div>
|
||
<div class="text-[11.5px] text-white/55 mt-0.5">Mo–Fr · 07:00 Uhr</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">Wochenrückblick</div>
|
||
<div class="text-[11.5px] text-white/55 mt-0.5">Sonntags · 18:00 Uhr</div>
|
||
</div>
|
||
</label>
|
||
|
||
<label class="flex items-start gap-3.5 px-4 py-3.5 bg-white/[0.06] border border-brand/40 cursor-pointer">
|
||
<span class="w-[18px] h-[18px] flex-shrink-0 mt-0.5 bg-brand border border-brand 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="white" stroke-width="2" /></svg>
|
||
</span>
|
||
<div class="flex-1">
|
||
<div class="text-[13.5px] font-semibold text-white">Energie & Klima</div>
|
||
<div class="text-[11.5px] text-white/55 mt-0.5">ab Content-Score 80 · max. 2× 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">IPO & M&A</div>
|
||
<div class="text-[11.5px] text-white/55 mt-0.5">ausgewählt von der Redaktion · ca. 3–5 Mails/Monat</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- ============== CONTENT-SCORE TRUST ANCHOR ============== -->
|
||
<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-brand">
|
||
<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-brand whitespace-nowrap underline underline-offset-[3px] decoration-brand/40">
|
||
Redaktionsrichtlinien →
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== FOOTER ============== -->
|
||
<footer class="mt-16 bg-topbar-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">
|
||
businessportal<span class="text-brand">24</span>
|
||
</div>
|
||
<div class="eyebrow mt-2 text-[9.5px] tracking-[0.18em]" style="color:#8A847B;">
|
||
Pressemitteilungen · DACH
|
||
</div>
|
||
<p class="text-[12.5px] text-white/55 leading-[1.55] mt-4 max-w-[320px]">
|
||
Veröffentlichungs-Portal für redaktionell geprüfte Pressemitteilungen aus Deutschland, Österreich und der Schweiz.
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="eyebrow mb-3.5">Pressemitteilungen</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="#">Ad-Hoc-Meldungen</a></li>
|
||
<li><a href="#">Termine & Events</a></li>
|
||
<li><a href="#">Newsrooms</a></li>
|
||
<li><a href="#">Branchen-Index</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="eyebrow mb-3.5">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 & Pakete</a></li>
|
||
<li><a href="#">Verifizierter Newsroom</a></li>
|
||
<li><a href="#">API & RSS</a></li>
|
||
<li><a href="#">Mediendaten</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="eyebrow mb-3.5">Unternehmen</div>
|
||
<ul class="space-y-2 text-[13px] text-white/75 list-none p-0 m-0">
|
||
<li><a href="#">Über businessportal24</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/10">
|
||
<div class="max-w-layout mx-auto px-8 py-5 flex items-center justify-between gap-4 text-[11.5px] text-white/50">
|
||
<span>© 2026 businessportal24.com · 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>
|