presseportale/dev/frontend/tailwind_v3/Veröffentlichen Tailwind.html
Kevin Adametz 5b8bdf4182
Some checks are pending
linter / quality (push) Waiting to run
tests / ci (push) Waiting to run
12-05-2026 Frontend dev
2026-05-12 18:32:33 +02:00

642 lines
45 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>businessportal24 — Pressemitteilung veröffentlichen</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
bg:"#F6F4EF","bg-elev":"#FBFAF6","bg-rule":"#E5E0D5","bg-rule-strong":"#1C1A17",
"bg-card-warm":"#F1ECE2","bg-card-warm-border":"#D9CDB6",
"bg-footer":"#0F1216","bg-strip":"#1A1F26",
topbar:"#1A1F26",topbar2:"#232A33",
ink:"#1C1A17","ink-2":"#3D3935","ink-3":"#6E6862","ink-4":"#9A958D",
"ink-on-dark":"#F6F4EF","ink-on-dark-2":"#B8B3AA",
brand:"#C84A1E","brand-deep":"#A23814","brand-soft":"#F4E5DD",
live:"#E03A1A",gain:"#2E8540",loss:"#C8341E",ok:"#2E8540",
},
fontFamily: {
sans:['"Inter Tight"','"Söhne"','Inter','system-ui','sans-serif'],
serif:['"Source Serif 4"','"Source Serif Pro"','Charter','Georgia','serif'],
mono:['"JetBrains Mono"','"SF Mono"','ui-monospace','monospace'],
},
maxWidth:{ layout:"1280px" },
backgroundImage:{
"topbar-grad":"linear-gradient(135deg,#1A1F26 0%,#232A33 100%)",
}
}
}
};
</script>
<style>
html,body{margin:0;padding:0;} body{background:#E8E4DA;font-family:"Inter Tight",system-ui,sans-serif;}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#C84A1E;}
.eyebrow.muted{color:#6E6862;}
.bp-cat{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#C84A1E;}
.rule-strong{height:1px;background:#1C1A17;border:0;margin:0;}
.rule{height:1px;background:#E5E0D5;border:0;margin:0;}
@keyframes bp-pulse{0%,100%{opacity:1}50%{opacity:.3}} .pulse-dot{animation:bp-pulse 1.6s ease-in-out infinite;}
details > summary{list-style:none;cursor:pointer;}
details > summary::-webkit-details-marker{display:none;}
details[open] .faq-plus::before{content:"";}
details:not([open]) .faq-plus::before{content:"+";}
</style>
</head>
<body class="bg-bg text-ink font-sans antialiased">
<div class="mx-auto bg-bg" style="width:1280px;">
<!-- ============== TOP UTILITY BAR ============== -->
<div class="bg-topbar-grad text-ink-on-dark-2 border-b border-black">
<div class="max-w-layout mx-auto px-8 flex items-stretch text-[11.5px] tracking-wide">
<span class="flex items-center pr-4 py-2 whitespace-nowrap border-r border-[#2A2723]">Mi, 6. Mai 2026</span>
<span class="flex items-center px-3.5 text-[9.5px] uppercase font-semibold tracking-[0.16em] text-[#6E6862] whitespace-nowrap">Ausgabe</span>
<button class="flex items-center gap-1.5 px-2.5 py-2 text-[11.5px] font-semibold text-ink-on-dark bg-white/[0.06] border-b-2 border-brand -mb-px whitespace-nowrap"><span class="text-[12px] leading-none">🇩🇪</span><span>DE</span></button>
<button class="flex items-center gap-1.5 px-2.5 py-2 text-[11.5px] font-medium text-ink-on-dark-2 border-b-2 border-transparent -mb-px whitespace-nowrap"><span class="text-[12px] leading-none">🇦🇹</span><span>AT</span></button>
<button class="flex items-center gap-1.5 px-2.5 py-2 text-[11.5px] font-medium text-ink-on-dark-2 border-b-2 border-transparent -mb-px whitespace-nowrap"><span class="text-[12px] leading-none">🇨🇭</span><span>CH</span></button>
<button class="flex items-center gap-1.5 px-2.5 py-2 text-[11.5px] font-medium text-ink-on-dark-2 border-b-2 border-transparent -mb-px whitespace-nowrap"><span class="text-[12px] leading-none">🌐</span><span>EN</span></button>
<span class="flex-1"></span>
<span class="flex items-center gap-4 py-2 whitespace-nowrap">
<span class="inline-flex items-center gap-1.5">
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" class="opacity-60"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1"/><path d="M1 6h10M6 1c2 1.5 2 8.5 0 10M6 1c-2 1.5-2 8.5 0 10" stroke="currentColor" stroke-width="1" fill="none"/></svg>
<strong class="text-ink-on-dark font-semibold">Deutsch</strong>
</span>
<span class="w-px h-[14px] bg-[#2A2723]"></span>
<a href="#" class="hover:text-ink-on-dark">Newsletter</a>
<a href="#" class="hover:text-ink-on-dark">RSS</a>
<a href="#" class="hover:text-ink-on-dark">API</a>
</span>
</div>
</div>
<!-- ============== HEADER ============== -->
<header class="bg-bg border-b border-bg-rule">
<div class="max-w-layout mx-auto px-8 py-[18px] grid items-center gap-6" style="grid-template-columns:auto 1fr auto auto;">
<div>
<div class="font-serif text-[28px] font-semibold leading-none tracking-[-0.5px]">businessportal<span class="text-brand">24</span></div>
<div class="eyebrow muted mt-1 text-[9.5px] tracking-[0.18em]">Pressemitteilungen · DACH</div>
</div>
<div class="w-full max-w-[540px]">
<div class="flex items-center gap-2.5 px-3.5 py-2.5 border border-bg-rule bg-bg-elev text-[13px] text-ink-3">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5" stroke="currentColor" stroke-width="1.5"/><path d="M11 11l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
<span class="flex-1">Suche — Unternehmen, ISIN, Standort, Mitteilung…</span>
<span class="text-[10.5px] text-ink-4 border border-bg-rule px-1.5 py-0.5 font-mono">⌘K</span>
</div>
</div>
<button class="px-4 py-2.5 text-[13px] font-semibold text-ink">Anmelden</button>
<button class="inline-flex items-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold text-white bg-brand hover:bg-brand-deep transition-colors">
Veröffentlichen
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 6h6M6 3l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
</header>
<!-- ============== MAIN NAV ============== -->
<nav class="bg-bg border-b border-bg-rule">
<div class="max-w-layout mx-auto px-8 flex items-stretch">
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Startseite</a>
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Wirtschaft</a>
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Technologie</a>
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Finanzen</a>
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Industrie</a>
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Energie</a>
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Gesundheit</a>
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Handel</a>
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Immobilien</a>
<a href="#" class="px-4 py-3.5 text-[13.5px] font-medium text-ink-2 border-b-2 border-transparent hover:text-ink">Mobilität</a>
<span class="flex-1"></span>
<a href="#" class="px-4 py-3.5 text-[13.5px] font-semibold text-ink border-b-2 border-brand -mb-px">Pressestelle</a>
</div>
</nav>
<!-- ============== PUB SUBNAV ============== -->
<div class="bg-bg border-b border-bg-rule">
<div class="max-w-layout mx-auto px-8 py-2.5 flex items-center justify-between text-[12px] text-ink-3">
<div class="flex items-center gap-2">
<a href="#" class="text-ink-3 hover:text-ink">businessportal24</a>
<span class="text-ink-4"></span>
<span class="text-ink">Veröffentlichen</span>
</div>
<div class="flex items-center gap-[18px]">
<span class="inline-flex items-center gap-1.5">
<svg width="11" height="11" viewBox="0 0 11 11"><path d="M2 5.5l2.2 2.2L9 3" stroke="#2E8540" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>
<span>Redaktionell geprüft seit 2012</span>
</span>
<span class="text-ink-4">·</span>
<a href="#" class="text-ink-2 hover:text-ink">Hilfe &amp; Support</a>
<a href="#" class="text-ink-2 hover:text-ink">Mediadaten</a>
</div>
</div>
</div>
<main>
<!-- ============== HERO ============== -->
<section class="bg-bg">
<div class="max-w-layout mx-auto px-8 pt-14 pb-12 grid items-start" style="grid-template-columns:1.35fr 1fr; gap:72px;">
<!-- LEFT — editorial copy -->
<div>
<div class="flex items-center gap-3 mb-7">
<span class="w-7 h-px bg-brand"></span>
<span class="eyebrow text-[11px]">Pressestelle · Veröffentlichen</span>
</div>
<h1 class="font-serif text-[58px] font-semibold m-0 text-ink" style="line-height:1.05;letter-spacing:-1.2px;text-wrap:balance;">
Pressemitteilung veröffentlichen.<br />
Geprüft. Dauerhaft auffindbar.
</h1>
<p class="font-serif mt-7 text-[19px] leading-[1.5] text-ink-2 max-w-[560px] font-normal">
businessportal24 ist die Presseplattform für mittelständische Unternehmen, Selbstständige und PR-Agenturen aus Deutschland, Österreich und der Schweiz. Jede Mitteilung wird auf Qualität geprüft und bleibt dauerhaft im Archiv auffindbar.
</p>
<!-- STÖRER — Hub-CTA -->
<div class="relative mt-9 grid items-center overflow-hidden text-ink-on-dark" style="background:#1A1F26;grid-template-columns:1.4fr auto;gap:28px;padding:28px 32px 30px;">
<span class="absolute left-0 top-0 bottom-0 w-[3px] bg-brand"></span>
<div>
<div class="eyebrow mb-2.5 text-[10.5px]" style="color:#FF8B6F;">Einreichen im Publisher-Bereich</div>
<h3 class="font-serif m-0 text-[23px] font-semibold leading-[1.25] tracking-[-0.3px] text-ink-on-dark">Die Einreichung läuft über presseportale.com.</h3>
<p class="mt-2.5 mb-0 text-[13.5px] leading-[1.55] text-ink-on-dark-2 max-w-[540px]">Dort verwalten Sie Mitteilungen, Credits und Newsroom — einmaliges Konto, beide Portale nutzbar (businessportal24 &amp; presseecho.de).</p>
</div>
<div class="flex flex-col items-end gap-2.5">
<button class="inline-flex items-center gap-2 px-[22px] py-3.5 text-[14px] font-semibold text-white bg-brand hover:bg-brand-deep">
Zum Publisher-Bereich
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="ml-0.5"><path d="M4 8L8.5 3.5M8.5 3.5H5M8.5 3.5V7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<span class="text-[11.5px] text-ink-on-dark-2">Login per Magic-Link · ohne Vertragsbindung</span>
</div>
</div>
<hr class="rule mt-2 mb-0" />
<!-- Faktenleiste -->
<div class="grid grid-cols-4 border-b border-bg-rule">
<div class="py-5 pr-5 border-r border-bg-rule">
<div class="eyebrow muted text-[10px] mb-2 inline-flex items-center gap-1.5">Seit</div>
<div class="font-serif text-[28px] font-semibold leading-none text-ink" style="letter-spacing:-0.4px;">2012</div>
<div class="mt-2 text-[12px] leading-[1.4] text-ink-3">im Betrieb · über ein Jahrzehnt durchgehende Archivierung</div>
</div>
<div class="py-5 px-5 border-r border-bg-rule">
<div class="eyebrow muted text-[10px] mb-2 inline-flex items-center gap-1.5">Archiv</div>
<div class="font-serif text-[28px] font-semibold leading-none text-ink" style="letter-spacing:-0.4px;">100.000+</div>
<div class="mt-2 text-[12px] leading-[1.4] text-ink-3">Mitteilungen weiterhin abrufbar — auch ältere Jahrgänge</div>
</div>
<div class="py-5 px-5 border-r border-bg-rule">
<div class="eyebrow muted text-[10px] mb-2 inline-flex items-center gap-1.5">Reichweite</div>
<div class="font-serif text-[28px] font-semibold leading-none text-ink" style="letter-spacing:-0.4px;">DACH</div>
<div class="mt-2 text-[12px] leading-[1.4] text-ink-3">Deutschland, Österreich, Schweiz · vier Sprach-Ausgaben</div>
</div>
<div class="py-5 pl-5">
<div class="eyebrow muted text-[10px] mb-2 inline-flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-brand pulse-dot"></span>Heute
</div>
<div class="font-serif text-[28px] font-semibold leading-none text-ink" style="letter-spacing:-0.4px;">12 / 4</div>
<div class="mt-2 text-[12px] leading-[1.4] text-ink-3">veröffentlicht / in redaktioneller Prüfung — Stand 14:42 Uhr</div>
</div>
</div>
</div>
<!-- RIGHT — Beispiel-Mitteilung -->
<aside class="sticky top-6">
<div class="text-[11px] tracking-[0.14em] uppercase text-ink-3 font-semibold mb-2.5">So sieht eine veröffentlichte Mitteilung aus</div>
<article class="bg-bg-elev border border-bg-rule" style="padding:22px 24px 24px;">
<div class="flex items-center justify-between mb-3.5">
<span class="bp-cat text-[10.5px]">Industrie · Maschinenbau</span>
<span class="inline-flex items-center gap-1.5 text-[10.5px] text-ok font-semibold">
<svg width="11" height="11" viewBox="0 0 11 11"><path d="M2 5.5l2.2 2.2L9 3" stroke="currentColor" stroke-width="1.7" fill="none" stroke-linecap="round"/></svg>
Geprüft
</span>
</div>
<h3 class="font-serif m-0 text-[22px] leading-[1.2] font-semibold text-ink" style="letter-spacing:-0.3px;">Mittelständische Fertiger eröffnet Werk im Westmünsterland und schafft 84 Arbeitsplätze</h3>
<p class="font-serif mt-3.5 mb-0 text-[14px] leading-[1.55] text-ink-2">Coesfeld · Die Brinkmann Präzisionstechnik GmbH hat einen Erweiterungsbau in Betrieb genommen. Investitionsvolumen: 9,4 Mio. Euro. Geschäftsführer Michael Brinkmann nennt die regionale Anbindung als entscheidenden Faktor.</p>
<hr class="rule" style="margin:18px 0 14px;" />
<div class="flex flex-wrap text-[11.5px] text-ink-3" style="gap:8px 18px;">
<span>Brinkmann Präzisionstechnik GmbH</span>
<span class="text-ink-4">·</span>
<span class="font-mono">14. Mai 2026, 09:30</span>
<span class="text-ink-4">·</span>
<span>3 Min. Lesezeit</span>
</div>
<div class="mt-3.5 px-3 py-2.5 bg-bg border border-bg-rule text-[11px] text-ink-3 font-mono flex items-center justify-between gap-2.5">
<span>businessportal24.com/p/brinkmann-werk-coesfeld</span>
<span class="text-ink-4">Permanent</span>
</div>
</article>
<div class="mt-3.5 text-[11.5px] text-ink-3 leading-[1.5]">Beispiel. Jede Mitteilung erhält eine permanente URL, ein strukturiertes Datenblatt und bleibt im durchsuchbaren Archiv.</div>
</aside>
</div>
</section>
<!-- ============== NEWSROOMS — Fließtext ============== -->
<section class="bg-bg border-t border-bg-rule">
<div class="max-w-layout mx-auto px-8 py-[22px] grid items-baseline" style="grid-template-columns:auto 1fr auto; gap:28px;">
<span class="eyebrow muted text-[10.5px] flex-shrink-0">Aktive Newsrooms heute</span>
<p class="m-0 text-[13.5px] leading-[1.6] text-ink-2">
<span class="text-ink font-medium">Siemens AG</span><span class="text-ink-4"> · </span>
<span class="text-ink font-medium">BASF SE</span><span class="text-ink-4"> · </span>
<span class="text-ink font-medium">Deutsche Telekom</span><span class="text-ink-4"> · </span>
<span class="text-ink font-medium">Volkswagen AG</span><span class="text-ink-4"> · </span>
<span class="text-ink font-medium">Allianz SE</span><span class="text-ink-4"> · </span>
<span class="text-ink font-medium">Deutsche Bank</span><span class="text-ink-4"> · </span>
<span class="text-ink font-medium">RWE</span><span class="text-ink-4"> · </span>
<span class="text-ink font-medium">OMV</span><span class="text-ink-4"> · </span>
<span class="text-ink font-medium">Voestalpine</span><span class="text-ink-4"> · </span>
<span class="text-ink font-medium">Roche</span>
<span class="text-ink-3"> — und 187 weitere veröffentlichende Unternehmen im laufenden Monat.</span>
</p>
<a href="#" class="text-[12px] text-brand font-medium border-b border-brand pb-px flex-shrink-0">Alle Newsrooms →</a>
</div>
</section>
<!-- ============== TRUST — vier Prinzipien ============== -->
<section class="bg-bg" style="border-top:1px solid #1C1A17;">
<div class="max-w-layout mx-auto px-8 py-14">
<header class="grid items-end" style="grid-template-columns:auto 1fr auto; gap:32px;">
<div class="flex flex-col gap-3.5">
<span class="font-mono text-[11px] text-ink-4" style="letter-spacing:0.1em;">§&nbsp;01</span>
<div>
<div class="eyebrow text-[10.5px] mb-2.5">Was uns ausmacht</div>
<h2 class="font-serif m-0 text-[36px] font-semibold leading-[1.1] text-ink max-w-[720px]" style="letter-spacing:-0.6px;text-wrap:balance;">Vier Prinzipien, die diese Plattform tragen</h2>
</div>
</div>
<div></div>
<div></div>
</header>
<div class="grid grid-cols-4 mt-9" style="border-top:1px solid #1C1A17;">
<div class="py-7 pr-6 border-r border-bg-rule">
<div class="eyebrow muted text-[10px] mb-3.5">Qualität</div>
<h3 class="font-serif m-0 text-[22px] leading-[1.2] font-semibold" style="letter-spacing:-0.3px;">Geprüfte Mitteilungen</h3>
<p class="mt-3.5 mb-0 text-[14px] leading-[1.55] text-ink-2">Jede Mitteilung durchläuft eine Qualitätsprüfung, bevor sie online geht. Keine SEO-Spam-Texte, keine reinen Werbeanzeigen.</p>
</div>
<div class="py-7 px-6 border-r border-bg-rule">
<div class="eyebrow muted text-[10px] mb-3.5">Auffindbarkeit</div>
<h3 class="font-serif m-0 text-[22px] leading-[1.2] font-semibold" style="letter-spacing:-0.3px;">Dauerhaft im Archiv</h3>
<p class="mt-3.5 mb-0 text-[14px] leading-[1.55] text-ink-2">Pressemitteilungen bleiben im Archiv auch nach Jahren. Über 100.000 Mitteilungen aus mehr als einem Jahrzehnt sind weiterhin abrufbar.</p>
</div>
<div class="py-7 px-6 border-r border-bg-rule">
<div class="eyebrow muted text-[10px] mb-3.5">Konditionen</div>
<h3 class="font-serif m-0 text-[22px] leading-[1.2] font-semibold" style="letter-spacing:-0.3px;">Faire Preise, keine Bindung</h3>
<p class="mt-3.5 mb-0 text-[14px] leading-[1.55] text-ink-2">Transparente Preise, kein Abo-Zwang, keine Vertragsfallen. Sie zahlen, was Sie einreichen.</p>
</div>
<div class="py-7 pl-6">
<div class="eyebrow muted text-[10px] mb-3.5">Umgang mit Fehlern</div>
<h3 class="font-serif m-0 text-[22px] leading-[1.2] font-semibold" style="letter-spacing:-0.3px;">Korrektur statt Löschung</h3>
<p class="mt-3.5 mb-0 text-[14px] leading-[1.55] text-ink-2">Fehler in einer Mitteilung? Wir korrigieren statt zu löschen damit Verweise und Verlinkungen bestehen bleiben.</p>
</div>
</div>
</div>
</section>
<!-- ============== ABLAUF ============== -->
<section id="ablauf" class="bg-bg-elev border-t border-bg-rule">
<div class="max-w-layout mx-auto px-8 py-16">
<header class="grid items-end" style="grid-template-columns:auto 1fr auto; gap:32px;">
<div class="flex flex-col gap-3.5">
<span class="font-mono text-[11px] text-ink-4" style="letter-spacing:0.1em;">§&nbsp;02</span>
<div>
<div class="eyebrow text-[10.5px] mb-2.5">Ablauf</div>
<h2 class="font-serif m-0 text-[36px] font-semibold leading-[1.1] text-ink max-w-[720px]" style="letter-spacing:-0.6px;text-wrap:balance;">So funktioniert's — drei Schritte</h2>
</div>
</div>
<div></div>
<div class="text-[12.5px] text-ink-3 max-w-[280px] text-right leading-[1.55]">Keine Magic-Sprache. Was hier passiert, passiert sichtbar.</div>
</header>
<div class="grid grid-cols-3 mt-10" style="gap:1px;background:#E5E0D5;border-top:1px solid #1C1A17;border-bottom:1px solid #1C1A17;">
<div class="bg-bg-elev px-7 pt-8 pb-9">
<div class="flex items-baseline justify-between mb-[22px]">
<span class="font-mono text-[13px] text-brand font-semibold">01</span>
<span class="eyebrow muted text-[10px]">≈ 2 Minuten</span>
</div>
<h3 class="font-serif m-0 text-[24px] leading-[1.2] font-semibold" style="letter-spacing:-0.3px;">Konto anlegen</h3>
<p class="mt-3.5 mb-0 text-[14px] leading-[1.6] text-ink-2">Mit E-Mail-Adresse. Kein Passwort nötig — Login per Magic-Link. Konto und Abrechnung liegen im zentralen Publisher-Bereich.</p>
</div>
<div class="bg-bg-elev px-7 pt-8 pb-9">
<div class="flex items-baseline justify-between mb-[22px]">
<span class="font-mono text-[13px] text-brand font-semibold">02</span>
<span class="eyebrow muted text-[10px]">üblich werktags · innerhalb 24 h</span>
</div>
<h3 class="font-serif m-0 text-[24px] leading-[1.2] font-semibold" style="letter-spacing:-0.3px;">Mitteilung einreichen</h3>
<p class="mt-3.5 mb-0 text-[14px] leading-[1.6] text-ink-2">Text, Bild, Ansprechpartner. Eine automatische Qualitätsprüfung läuft parallel zu einer kurzen redaktionellen Sichtung.</p>
</div>
<div class="bg-bg-elev px-7 pt-8 pb-9">
<div class="flex items-baseline justify-between mb-[22px]">
<span class="font-mono text-[13px] text-brand font-semibold">03</span>
<span class="eyebrow muted text-[10px]">permanent · indexiert</span>
</div>
<h3 class="font-serif m-0 text-[24px] leading-[1.2] font-semibold" style="letter-spacing:-0.3px;">Veröffentlichung</h3>
<p class="mt-3.5 mb-0 text-[14px] leading-[1.6] text-ink-2">Nach Freigabe online und im Archiv. Bei Bedarf jederzeit korrigierbar — die URL bleibt stabil, Verweise und Verlinkungen bestehen weiter.</p>
</div>
</div>
<p class="mt-4.5 mb-0 text-[12px] text-ink-3" style="margin-top:18px;">
Die Veröffentlichung erfolgt über den zentralen Publisher-Bereich auf
<a href="#" class="text-brand font-medium border-b border-brand">presseportale.com</a>.
Cross-Publishing nach presseecho.de ist optional verfügbar.
</p>
</div>
</section>
<!-- ============== ANLÄSSE ============== -->
<section class="bg-bg border-t border-bg-rule">
<div class="max-w-layout mx-auto px-8 py-16">
<header class="grid items-end" style="grid-template-columns:auto 1fr auto; gap:32px;">
<div class="flex flex-col gap-3.5">
<span class="font-mono text-[11px] text-ink-4" style="letter-spacing:0.1em;">§&nbsp;03</span>
<div>
<div class="eyebrow text-[10.5px] mb-2.5">Für wen</div>
<h2 class="font-serif m-0 text-[36px] font-semibold leading-[1.1] text-ink max-w-[720px]" style="letter-spacing:-0.6px;text-wrap:balance;">Typische Anlässe einer Veröffentlichung</h2>
</div>
</div>
<div></div>
<div class="text-[12.5px] text-ink-3 max-w-[280px] text-right leading-[1.55]">Anhaltspunkt für die Eignung. Eine Aufzählung, keine Liste der Möglichkeiten.</div>
</header>
<div class="grid mt-10 items-start" style="grid-template-columns:1.05fr 1fr; gap:64px;">
<!-- Anlässe-Liste -->
<ol class="list-none p-0 m-0">
<li class="grid items-start gap-4 py-[18px] border-t border-bg-rule-strong border-b border-bg-rule" style="grid-template-columns:44px 1fr;">
<span class="font-mono text-[12px] text-ink-4 pt-1">01</span>
<div>
<div class="font-serif text-[18px] font-semibold leading-[1.25] text-ink" style="letter-spacing:-0.2px;">Neue Produkte oder Dienstleistungen</div>
<div class="mt-1.5 text-[13px] text-ink-3 leading-[1.5]">Markteinführungen, Produktupdates, neue Services.</div>
</div>
</li>
<li class="grid items-start gap-4 py-[18px] border-b border-bg-rule" style="grid-template-columns:44px 1fr;">
<span class="font-mono text-[12px] text-ink-4 pt-1">02</span>
<div>
<div class="font-serif text-[18px] font-semibold leading-[1.25] text-ink" style="letter-spacing:-0.2px;">Personalien und Geschäftsleitungs-Wechsel</div>
<div class="mt-1.5 text-[13px] text-ink-3 leading-[1.5]">Berufungen, Bestellungen, Verabschiedungen.</div>
</div>
</li>
<li class="grid items-start gap-4 py-[18px] border-b border-bg-rule" style="grid-template-columns:44px 1fr;">
<span class="font-mono text-[12px] text-ink-4 pt-1">03</span>
<div>
<div class="font-serif text-[18px] font-semibold leading-[1.25] text-ink" style="letter-spacing:-0.2px;">Auszeichnungen und Zertifizierungen</div>
<div class="mt-1.5 text-[13px] text-ink-3 leading-[1.5]">Awards, ISO- und Branchen-Zertifikate, Audits.</div>
</div>
</li>
<li class="grid items-start gap-4 py-[18px] border-b border-bg-rule" style="grid-template-columns:44px 1fr;">
<span class="font-mono text-[12px] text-ink-4 pt-1">04</span>
<div>
<div class="font-serif text-[18px] font-semibold leading-[1.25] text-ink" style="letter-spacing:-0.2px;">Standort-Eröffnungen, Expansionen, Aufträge</div>
<div class="mt-1.5 text-[13px] text-ink-3 leading-[1.5]">Werke, Niederlassungen, Großaufträge, Investitionen.</div>
</div>
</li>
<li class="grid items-start gap-4 py-[18px] border-b border-bg-rule" style="grid-template-columns:44px 1fr;">
<span class="font-mono text-[12px] text-ink-4 pt-1">05</span>
<div>
<div class="font-serif text-[18px] font-semibold leading-[1.25] text-ink" style="letter-spacing:-0.2px;">Veranstaltungs-Ankündigungen</div>
<div class="mt-1.5 text-[13px] text-ink-3 leading-[1.5]">Tage der offenen Tür, Fachtage, Hauptversammlungen.</div>
</div>
</li>
<li class="grid items-start gap-4 py-[18px] border-b border-bg-rule" style="grid-template-columns:44px 1fr;">
<span class="font-mono text-[12px] text-ink-4 pt-1">06</span>
<div>
<div class="font-serif text-[18px] font-semibold leading-[1.25] text-ink" style="letter-spacing:-0.2px;">Studien und Marktanalysen</div>
<div class="mt-1.5 text-[13px] text-ink-3 leading-[1.5]">Eigene Erhebungen, Trendberichte, Branchenkennzahlen.</div>
</div>
</li>
</ol>
<!-- Abgrenzung -->
<aside class="border border-bg-rule" style="padding:28px 30px 32px;background:#FBF6EF;border-left:3px solid #C84A1E;">
<div class="eyebrow text-[10.5px] mb-3.5">Wichtig zur Eingrenzung</div>
<h3 class="font-serif m-0 text-[22px] leading-[1.25] font-semibold" style="letter-spacing:-0.3px;">
Nicht geeignet sind reine Werbeanzeigen, SEO-Linkbuilding-Texte oder Inhalte ohne nachvollziehbaren Pressewert.
</h3>
<p class="mt-4.5 mb-0 text-[13.5px] leading-[1.6] text-ink-2" style="margin-top:18px;">
Die redaktionelle Sichtung soll den Charakter der Plattform sichern. Mitteilungen, die diese Schwelle nicht erreichen, werden mit einer kurzen Begründung zurückgegeben — meist mit einem konkreten Korrekturvorschlag.
</p>
<hr class="rule" style="margin:22px 0 16px;" />
<div class="grid gap-2.5 text-[13px] text-ink-2">
<div class="flex items-start gap-2.5">
<svg width="14" height="14" viewBox="0 0 14 14" class="mt-[3px] flex-shrink-0"><path d="M3 7l3 3 5-6" stroke="#2E8540" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span class="text-ink">Mitteilungen mit klarem Anlass und Quelle</span>
</div>
<div class="flex items-start gap-2.5">
<svg width="14" height="14" viewBox="0 0 14 14" class="mt-[3px] flex-shrink-0"><path d="M3 7l3 3 5-6" stroke="#2E8540" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span class="text-ink">Ansprechpartner mit Funktion und Kontakt</span>
</div>
<div class="flex items-start gap-2.5">
<svg width="14" height="14" viewBox="0 0 14 14" class="mt-[3px] flex-shrink-0"><path d="M3.5 3.5l7 7M10.5 3.5l-7 7" stroke="#6E6862" stroke-width="1.6" stroke-linecap="round"/></svg>
<span class="text-ink-3">Reine Verkaufs- und Rabatt-Texte</span>
</div>
<div class="flex items-start gap-2.5">
<svg width="14" height="14" viewBox="0 0 14 14" class="mt-[3px] flex-shrink-0"><path d="M3.5 3.5l7 7M10.5 3.5l-7 7" stroke="#6E6862" stroke-width="1.6" stroke-linecap="round"/></svg>
<span class="text-ink-3">Anonyme oder Quellen-lose Inhalte</span>
</div>
</div>
</aside>
</div>
</div>
</section>
<!-- ============== PREISE ============== -->
<section class="bg-bg-elev border-t border-bg-rule">
<div class="max-w-layout mx-auto px-8 py-14">
<header class="grid items-end" style="grid-template-columns:auto 1fr auto; gap:32px;">
<div class="flex flex-col gap-3.5">
<span class="font-mono text-[11px] text-ink-4" style="letter-spacing:0.1em;">§&nbsp;04</span>
<div>
<div class="eyebrow text-[10.5px] mb-2.5">Preise</div>
<h2 class="font-serif m-0 text-[36px] font-semibold leading-[1.1] text-ink max-w-[720px]" style="letter-spacing:-0.6px;text-wrap:balance;">Sie zahlen, was Sie einreichen.</h2>
</div>
</div>
<div></div>
<div></div>
</header>
<div class="grid mt-9" style="grid-template-columns:1.3fr 1fr 1fr; border-top:1px solid #1C1A17; border-bottom:1px solid #1C1A17;">
<!-- Logik -->
<div class="pr-8 pt-7 pb-8 border-r border-bg-rule" style="padding-right:32px;">
<div class="eyebrow muted text-[10px] mb-3">Logik</div>
<p class="font-serif m-0 text-[19px] leading-[1.5] text-ink" style="letter-spacing:-0.1px;">
Sie kaufen Credits, die für Veröffentlichungen eingesetzt werden. Keine Mindestlaufzeit, keine versteckten Gebühren.
</p>
<ul class="list-none p-0 mt-5 text-[13px] text-ink-2 grid gap-2.5">
<li class="flex items-start gap-2.5"><span class="w-1.5 h-px bg-brand mt-2.5 flex-shrink-0"></span><span>Credits verfallen nicht.</span></li>
<li class="flex items-start gap-2.5"><span class="w-1.5 h-px bg-brand mt-2.5 flex-shrink-0"></span><span>Korrekturen sind kostenfrei.</span></li>
<li class="flex items-start gap-2.5"><span class="w-1.5 h-px bg-brand mt-2.5 flex-shrink-0"></span><span>Mengenrabatte ab dem zweiten Paket.</span></li>
</ul>
</div>
<!-- Anker -->
<div class="px-8 pt-7 pb-8 border-r border-bg-rule flex flex-col justify-between">
<div>
<div class="eyebrow muted text-[10px] mb-3">Anker</div>
<div class="font-serif text-[16px] leading-[1.4] text-ink-2">Eine Veröffentlichung</div>
<div class="mt-2 flex items-baseline gap-2">
<span class="font-serif text-[48px] font-semibold leading-none text-ink" style="letter-spacing:-1.5px;">ab&nbsp;89&nbsp;</span>
</div>
<div class="mt-2.5 text-[12px] text-ink-3">netto · zzgl. USt. · Mengenrabatte verfügbar.</div>
</div>
<div class="mt-5 text-[11.5px] text-ink-3 leading-[1.5]">Beispiel-Pakete: 5er ab 79&nbsp;&nbsp;/&nbsp;Mitteilung · 25er ab 64&nbsp;&nbsp;/&nbsp;Mitteilung.</div>
</div>
<!-- Hub-Verweis -->
<div class="pl-8 pt-7 pb-8 flex flex-col justify-between">
<div>
<div class="eyebrow muted text-[10px] mb-3">Vollständige Übersicht</div>
<p class="m-0 text-[14px] leading-[1.6] text-ink-2">Pakete, Cross-Publishing nach presseecho.de, Agentur-Konditionen und Rechnungseinstellungen finden Sie im zentralen Publisher-Bereich.</p>
</div>
<a href="#" class="mt-5 inline-flex items-center gap-2 text-[13.5px] font-semibold text-brand border-b border-brand self-start pb-0.5">
Preisübersicht im Publisher-Bereich
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 6h6M6 3l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
</div>
</div>
</div>
</section>
<!-- ============== FAQ ============== -->
<section class="bg-bg border-t border-bg-rule">
<div class="max-w-layout mx-auto px-8 py-16">
<header class="grid items-end" style="grid-template-columns:auto 1fr auto; gap:32px;">
<div class="flex flex-col gap-3.5">
<span class="font-mono text-[11px] text-ink-4" style="letter-spacing:0.1em;">§&nbsp;05</span>
<div>
<div class="eyebrow text-[10.5px] mb-2.5">Häufige Fragen</div>
<h2 class="font-serif m-0 text-[36px] font-semibold leading-[1.1] text-ink max-w-[720px]" style="letter-spacing:-0.6px;text-wrap:balance;">Kurz beantwortet</h2>
</div>
</div>
<div></div>
<div class="text-[12.5px] text-ink-3 max-w-[280px] text-right leading-[1.55]">Eine ausführliche Wissensdatenbank liegt im Publisher-Bereich.</div>
</header>
<div class="grid mt-9 items-start" style="grid-template-columns:1fr 1.6fr; gap:64px;">
<div class="sticky top-6 pt-2">
<p class="font-serif m-0 text-[16px] leading-[1.55] text-ink-2">Sie finden hier keine Antwort?</p>
<a href="#" class="mt-3.5 inline-flex items-center gap-1.5 text-[13.5px] font-medium text-brand border-b border-brand pb-0.5">Redaktion direkt anschreiben</a>
<div class="mt-3.5 text-[12px] text-ink-3 leading-[1.55]"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55273031343e213c3a3b153720263c3b302626253a2721343967617b363a38">[email&#160;protected]</a><br />MoFr · 09:0017:00 Uhr (MEZ)</div>
</div>
<div style="border-top:1px solid #1C1A17;">
<details open class="border-b border-bg-rule">
<summary class="grid items-center py-5.5 gap-4" style="grid-template-columns:44px 1fr 24px; padding:22px 0;">
<span class="font-mono text-[12px] text-ink-4">01</span>
<span class="font-serif text-[19px] font-semibold text-ink leading-[1.3]" style="letter-spacing:-0.2px;">Wie schnell wird meine Mitteilung veröffentlicht?</span>
<span class="faq-plus inline-flex items-center justify-center w-[22px] h-[22px] border border-bg-rule-strong text-[14px] text-ink font-medium"></span>
</summary>
<div class="text-[14px] leading-[1.6] text-ink-2 max-w-[640px]" style="padding:0 0 22px 60px;">Werktags üblicherweise innerhalb von 24 Stunden nach Einreichung. Bei zeitkritischen Mitteilungen ist eine vorab-Absprache möglich.</div>
</details>
<details class="border-b border-bg-rule">
<summary class="grid items-center gap-4" style="grid-template-columns:44px 1fr 24px; padding:22px 0;">
<span class="font-mono text-[12px] text-ink-4">02</span>
<span class="font-serif text-[19px] font-semibold text-ink leading-[1.3]" style="letter-spacing:-0.2px;">Bleibt meine Mitteilung dauerhaft online?</span>
<span class="faq-plus inline-flex items-center justify-center w-[22px] h-[22px] border border-bg-rule-strong text-[14px] text-ink font-medium"></span>
</summary>
<div class="text-[14px] leading-[1.6] text-ink-2 max-w-[640px]" style="padding:0 0 22px 60px;">Ja. Mitteilungen werden nicht gelöscht. Korrekturen sind jederzeit möglich — die URL bleibt erhalten.</div>
</details>
<details class="border-b border-bg-rule">
<summary class="grid items-center gap-4" style="grid-template-columns:44px 1fr 24px; padding:22px 0;">
<span class="font-mono text-[12px] text-ink-4">03</span>
<span class="font-serif text-[19px] font-semibold text-ink leading-[1.3]" style="letter-spacing:-0.2px;">Kann ich auch auf presseecho.de veröffentlichen?</span>
<span class="faq-plus inline-flex items-center justify-center w-[22px] h-[22px] border border-bg-rule-strong text-[14px] text-ink font-medium"></span>
</summary>
<div class="text-[14px] leading-[1.6] text-ink-2 max-w-[640px]" style="padding:0 0 22px 60px;">Ja, über den zentralen Publisher-Bereich. Cross-Publishing ist optional verfügbar und wird separat abgerechnet.</div>
</details>
<details class="border-b border-bg-rule">
<summary class="grid items-center gap-4" style="grid-template-columns:44px 1fr 24px; padding:22px 0;">
<span class="font-mono text-[12px] text-ink-4">04</span>
<span class="font-serif text-[19px] font-semibold text-ink leading-[1.3]" style="letter-spacing:-0.2px;">Brauche ich ein Abo?</span>
<span class="faq-plus inline-flex items-center justify-center w-[22px] h-[22px] border border-bg-rule-strong text-[14px] text-ink font-medium"></span>
</summary>
<div class="text-[14px] leading-[1.6] text-ink-2 max-w-[640px]" style="padding:0 0 22px 60px;">Nein. Sie kaufen Credits nach Bedarf, ohne Vertragsbindung. Nicht eingesetzte Credits verfallen nicht.</div>
</details>
<details class="border-b border-bg-rule">
<summary class="grid items-center gap-4" style="grid-template-columns:44px 1fr 24px; padding:22px 0;">
<span class="font-mono text-[12px] text-ink-4">05</span>
<span class="font-serif text-[19px] font-semibold text-ink leading-[1.3]" style="letter-spacing:-0.2px;">Was passiert bei einem Fehler in der Mitteilung?</span>
<span class="faq-plus inline-flex items-center justify-center w-[22px] h-[22px] border border-bg-rule-strong text-[14px] text-ink font-medium"></span>
</summary>
<div class="text-[14px] leading-[1.6] text-ink-2 max-w-[640px]" style="padding:0 0 22px 60px;">Korrektur statt Löschung: Inhalte werden aktualisiert, die URL bleibt erhalten, Verlinkungen und Verweise bestehen weiter.</div>
</details>
</div>
</div>
</div>
</section>
<!-- ============== FINAL CTA ============== -->
<section class="bg-bg" style="border-top:1px solid #1C1A17;">
<div class="max-w-layout mx-auto px-8 pt-14 pb-[72px]">
<div class="relative overflow-hidden grid items-end text-ink-on-dark" style="background:#1A1F26;padding:56px 56px 60px;grid-template-columns:1.3fr 1fr;gap:56px;">
<span class="absolute left-0 top-0 bottom-0 w-1 bg-brand"></span>
<div>
<div class="eyebrow mb-3.5 text-[10.5px]" style="color:#FF8B6F;">Mitteilung einreichen · Schritt eins</div>
<h2 class="font-serif m-0 text-[48px] font-semibold leading-[1.08] text-ink-on-dark max-w-[700px]" style="letter-spacing:-0.9px;text-wrap:balance;">Bereit, Ihre Mitteilung einzureichen?</h2>
<p class="font-serif mt-5.5 mb-0 text-[17px] leading-[1.55] text-ink-on-dark-2 max-w-[580px]" style="margin-top:22px;">
Konto in zwei Minuten anlegen, Text und Bild einreichen, nach redaktioneller Sichtung veröffentlicht. Einmaliges Konto — beide Portale (businessportal24 &amp; presseecho.de) nutzbar.
</p>
</div>
<div class="flex flex-col items-start gap-3.5">
<button class="inline-flex items-center gap-2 px-7 py-4 text-[15px] font-semibold text-white bg-brand hover:bg-brand-deep">
Zum Publisher-Bereich
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="ml-0.5"><path d="M4 8L8.5 3.5M8.5 3.5H5M8.5 3.5V7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<span class="text-[12px] text-ink-on-dark-2">Einreichung läuft über presseportale.com · Login per Magic-Link</span>
<a href="#" class="mt-1.5 text-[13px] text-ink-on-dark border-b pb-0.5" style="border-color:rgba(255,255,255,0.35);">Oder zuerst Beispiele ansehen →</a>
</div>
</div>
</div>
</section>
</main>
<!-- ============== FOOTER ============== -->
<footer class="bg-bg-footer text-ink-on-dark border-t border-black">
<div class="max-w-layout mx-auto px-8 pt-11 pb-7">
<div class="grid pb-7" style="grid-template-columns:1.5fr 1fr 1fr 1fr;gap:56px;border-bottom:1px solid rgba(255,255,255,0.08);">
<div>
<div class="font-serif text-[22px] font-semibold" style="letter-spacing:-0.4px;">businessportal<span class="text-brand">24</span></div>
<p class="mt-3 text-[12.5px] text-ink-on-dark-2 leading-[1.6] max-w-[380px]">businessportal24 ist ein Service der Presseportale-Gruppe. Plattform für Pressemitteilungen mittelständischer Unternehmen, Selbstständiger und PR-Agenturen im deutschsprachigen Raum.</p>
</div>
<div>
<div class="eyebrow mb-3.5 text-[10px]" style="color:rgba(255,255,255,0.5);">Einreichen</div>
<ul class="list-none p-0 m-0 grid gap-2.5">
<li><a href="#" class="text-[13px] text-ink-on-dark">Mitteilung einreichen</a></li>
<li><a href="#" class="text-[13px] text-ink-on-dark">Ablauf</a></li>
<li><a href="#" class="text-[13px] text-ink-on-dark">Preise</a></li>
<li><a href="#" class="text-[13px] text-ink-on-dark">Beispiele</a></li>
</ul>
</div>
<div>
<div class="eyebrow mb-3.5 text-[10px]" style="color:rgba(255,255,255,0.5);">Plattform</div>
<ul class="list-none p-0 m-0 grid gap-2.5">
<li><a href="#" class="text-[13px] text-ink-on-dark">Startseite</a></li>
<li><a href="#" class="text-[13px] text-ink-on-dark">Branchen</a></li>
<li><a href="#" class="text-[13px] text-ink-on-dark">Newsletter</a></li>
<li><a href="#" class="text-[13px] text-ink-on-dark">RSS / API</a></li>
</ul>
</div>
<div>
<div class="eyebrow mb-3.5 text-[10px]" style="color:rgba(255,255,255,0.5);">Unternehmen</div>
<ul class="list-none p-0 m-0 grid gap-2.5">
<li><a href="#" class="text-[13px] text-ink-on-dark">Über uns</a></li>
<li><a href="#" class="text-[13px] text-ink-on-dark">Impressum</a></li>
<li><a href="#" class="text-[13px] text-ink-on-dark">Datenschutz</a></li>
<li><a href="#" class="text-[13px] text-ink-on-dark">AGB</a></li>
</ul>
</div>
</div>
<div class="mt-5.5 flex justify-between items-center flex-wrap gap-4 text-[12px] text-ink-on-dark-2" style="margin-top:22px;">
<div>© 2026 Presseportale-Gruppe · Alle Rechte vorbehalten</div>
<div class="flex items-center gap-4">
<span class="text-ink-on-dark-2">Für fachlich-spezifische Themen:</span>
<a href="#" class="text-ink-on-dark border-b pb-px" style="border-color:rgba(255,255,255,0.3);">presseecho.de →</a>
</div>
</div>
</div>
</footer>
</div>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
</html>