Umbenennung presseportale → pressekonto in Domains, Themes und Dokumentation. Design-Tokens, Portal-Shell, Customer-Dashboard, Auth- und Admin-PM-Views. Artisan-Befehl migrate:legacy-media mit Tests und Hub-Flux-Entwicklungsdocs. Co-authored-by: Cursor <cursoragent@cursor.com>
767 lines
41 KiB
HTML
767 lines
41 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>presseportale.com — Mein Dashboard · Dark</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=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
|
|
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
/* DARK MODE — Tokens umgewidmet, gleiche Namen wie Light-Variante */
|
|
bg: "#0E1218",
|
|
"bg-elev": "#14181F",
|
|
"bg-rule": "#2A3142",
|
|
"bg-rule-2": "#232838",
|
|
"bg-card": "#181D27",
|
|
"bg-card-warm": "#1F1A12",
|
|
"hub": "#5A78C2",
|
|
"hub-2": "#6D8AD3",
|
|
"hub-3": "#4A65A8",
|
|
"hub-soft": "#1F2A47",
|
|
"hub-soft-2":"#2C3A5D",
|
|
"hub-line": "#7B8FBF",
|
|
"accent": "#D9A560",
|
|
"accent-deep": "#B07A3A",
|
|
"accent-soft": "#2A2418",
|
|
ink: "#ECE9E0",
|
|
"ink-2":"#C9C5B8",
|
|
"ink-3":"#8E8B82",
|
|
"ink-4":"#5D5C57",
|
|
"ink-on-dark": "#F6F4EF",
|
|
"ink-on-dark-2": "#B2B9C7",
|
|
"ink-on-dark-3": "#7B8FBF",
|
|
ok: "#4DC076",
|
|
"ok-soft":"#1A2D22",
|
|
warn: "#D9A560",
|
|
"warn-soft":"#2D2418",
|
|
err: "#E07664",
|
|
"err-soft":"#2E1715",
|
|
},
|
|
fontFamily: {
|
|
sans: ['"Inter Tight"','Inter','system-ui','sans-serif'],
|
|
mono: ['"JetBrains Mono"','"SF Mono"','ui-monospace','monospace'],
|
|
},
|
|
backgroundImage: {
|
|
"hub-grad": "linear-gradient(135deg,#1A2540 0%,#243152 100%)",
|
|
"hub-grad-2": "linear-gradient(180deg,#1A2540 0%,#0F1729 100%)",
|
|
"accent-grad": "linear-gradient(135deg,#B07A3A 0%,#8A5E27 100%)",
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
html { color-scheme: dark; }
|
|
html,body { margin:0; padding:0; }
|
|
body { background:#0A0D12; font-family:"Inter Tight",system-ui,sans-serif; }
|
|
|
|
.eyebrow {
|
|
font-size: 10.5px; font-weight: 700;
|
|
letter-spacing: 0.20em; text-transform: uppercase;
|
|
color: #B2B9C7;
|
|
}
|
|
.eyebrow.muted { color:#8E8B82; letter-spacing:0.16em; font-weight:600; font-size:10px; }
|
|
.eyebrow.accent { color:#D9A560; }
|
|
.eyebrow.on-dark { color:#7B8FBF; }
|
|
|
|
.section-eyebrow {
|
|
display:inline-flex; align-items:center; gap:10px;
|
|
font-size: 10.5px; font-weight: 700;
|
|
letter-spacing: 0.22em; text-transform: uppercase;
|
|
color:#B2B9C7;
|
|
}
|
|
.section-eyebrow::after {
|
|
content:""; display:block; width:30px; height:1px;
|
|
background:#B2B9C7; opacity:.35;
|
|
}
|
|
|
|
.rule { height:1px; background:#2A3142; border:0; margin:0; }
|
|
.rule-strong { height:1px; background:#ECE9E0; border:0; margin:0; }
|
|
|
|
/* Sidebar */
|
|
.nav-item {
|
|
display:flex; align-items:center; gap:11px;
|
|
padding:8px 12px;
|
|
border-radius:4px;
|
|
font-size:13px; font-weight:500;
|
|
color:#C9C5B8;
|
|
transition: background .12s, color .12s;
|
|
position:relative;
|
|
}
|
|
.nav-item:hover { background:#1F2A47; color:#ECE9E0; }
|
|
.nav-item.active {
|
|
background:#1F2A47;
|
|
color:#ECE9E0;
|
|
font-weight:600;
|
|
}
|
|
.nav-item.active::before {
|
|
content:""; position:absolute; left:-1px; top:6px; bottom:6px;
|
|
width:2px; background:#7B8FBF; border-radius:0 2px 2px 0;
|
|
}
|
|
.nav-item.disabled { color:#5D5C57; cursor:default; }
|
|
.nav-item.disabled:hover { background:transparent; color:#5D5C57; }
|
|
.nav-item .ico {
|
|
width:16px; height:16px; flex-shrink:0;
|
|
color: currentColor; opacity:.8;
|
|
}
|
|
.nav-item.active .ico { opacity:1; }
|
|
|
|
.nav-section {
|
|
font-size:10px; font-weight:700; letter-spacing:0.18em;
|
|
text-transform:uppercase; color:#5D5C57;
|
|
padding: 0 12px 6px;
|
|
}
|
|
|
|
/* Card / panel headers */
|
|
.panel {
|
|
background:#181D27; border:1px solid #2A3142; border-radius:6px;
|
|
}
|
|
.panel-warm { background:#14181F; border:1px solid #2A3142; border-radius:6px; }
|
|
.panel-dark { background:#0F1729; border:1px solid #1A2540; border-radius:6px; color:#F6F4EF; }
|
|
.panel-head {
|
|
display:flex; align-items:center; justify-content:space-between;
|
|
padding:14px 20px;
|
|
border-bottom:1px solid #2A3142;
|
|
}
|
|
.panel-dark .panel-head { border-bottom-color: rgba(255,255,255,.08); }
|
|
|
|
/* Stat cards */
|
|
.stat-card {
|
|
position:relative;
|
|
background:#181D27; border:1px solid #2A3142; border-radius:6px;
|
|
padding:18px 20px;
|
|
transition: border-color .12s, box-shadow .12s;
|
|
}
|
|
.stat-card .stat-strip {
|
|
position:absolute; left:0; top:0; bottom:0; width:3px;
|
|
background:#2C3A5D; border-radius:6px 0 0 6px;
|
|
}
|
|
.stat-card.is-primary .stat-strip { background:#5A78C2; }
|
|
.stat-card.is-ok .stat-strip { background:#4DC076; }
|
|
.stat-card.is-warn .stat-strip { background:#D9A560; }
|
|
.stat-card.is-muted .stat-strip { background:#5D5C57; }
|
|
|
|
.stat-label {
|
|
font-size:10.5px; font-weight:700;
|
|
letter-spacing:0.16em; text-transform:uppercase;
|
|
color:#8E8B82;
|
|
}
|
|
.stat-card.is-ok .stat-label { color:#4DC076; }
|
|
.stat-card.is-warn .stat-label { color:#D9A560; }
|
|
.stat-card.is-muted .stat-label { color:#8E8B82; }
|
|
|
|
.stat-num {
|
|
font-family:"JetBrains Mono","SF Mono",ui-monospace,monospace;
|
|
font-variant-numeric:tabular-nums;
|
|
font-size:36px; font-weight:600; color:#ECE9E0;
|
|
letter-spacing:-0.5px; line-height:1;
|
|
margin-top:14px;
|
|
}
|
|
|
|
/* Hint chips (Datenqualität) */
|
|
.hint-card {
|
|
display:grid; gap:14px;
|
|
grid-template-columns: auto 1fr;
|
|
align-items:start;
|
|
background:#1F1A12; border:1px solid #2D2418; border-left:3px solid #B07A3A;
|
|
border-radius:5px;
|
|
padding:16px 18px;
|
|
}
|
|
.hint-card .hint-ico {
|
|
width:36px; height:36px; border-radius:4px;
|
|
background:#2D2418; color:#D9A560;
|
|
display:flex; align-items:center; justify-content:center;
|
|
flex-shrink:0;
|
|
}
|
|
|
|
/* FluxUI-style buttons */
|
|
.btn-primary {
|
|
display:inline-flex; align-items:center; gap:8px; justify-content:center;
|
|
padding:9px 16px;
|
|
background:#5A78C2; color:#FFFFFF;
|
|
border-radius:4px; font-size:13px; font-weight:600;
|
|
transition: background .15s;
|
|
}
|
|
.btn-primary:hover { background:#6D8AD3; }
|
|
.btn-secondary {
|
|
display:inline-flex; align-items:center; gap:8px; justify-content:center;
|
|
padding:8px 14px;
|
|
background:#181D27; color:#ECE9E0;
|
|
border:1px solid #2A3142; border-radius:4px;
|
|
font-size:12.5px; font-weight:600;
|
|
transition: border-color .15s, background .15s;
|
|
}
|
|
.btn-secondary:hover { border-color:#5A78C2; background:#1F2A47; }
|
|
|
|
.badge {
|
|
display:inline-flex; align-items:center; gap:6px;
|
|
padding:3px 9px; border-radius:99px;
|
|
font-size:10.5px; font-weight:700;
|
|
letter-spacing:0.10em; text-transform:uppercase;
|
|
}
|
|
.badge.warn { background:#2D2418; color:#D9A560; }
|
|
.badge.ok { background:#1A2D22; color:#4DC076; }
|
|
.badge.hub { background:#1F2A47; color:#B2B9C7; }
|
|
.badge.dot::before {
|
|
content:""; width:6px; height:6px; border-radius:99px; background:currentColor;
|
|
}
|
|
|
|
/* Bridge ribbon - sehr subtil */
|
|
.bridge-row {
|
|
display:inline-flex; align-items:center; gap:6px;
|
|
font-family:"JetBrains Mono","SF Mono",ui-monospace,monospace;
|
|
font-size:10.5px; letter-spacing:0.10em; text-transform:uppercase;
|
|
color:#8E8B82;
|
|
}
|
|
.dot-pe { width:6px; height:6px; border-radius:99px; background:#4DA37A; }
|
|
.dot-bp { width:6px; height:6px; border-radius:99px; background:#E36340; }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-bg text-ink font-sans antialiased">
|
|
|
|
<!-- ============== ARTBOARD ============== -->
|
|
<div class="mx-auto bg-bg" style="width:1440px;">
|
|
|
|
<div class="flex" style="min-height:980px;">
|
|
|
|
<!-- =============================================
|
|
SIDEBAR — schmal, warm, klare Hierarchie
|
|
(FluxUI <flux:navlist> + Slot-Header-Styles)
|
|
============================================== -->
|
|
<aside class="bg-bg-elev border-r border-bg-rule flex flex-col" style="width:260px;">
|
|
|
|
<!-- Brand-Block -->
|
|
<div class="px-5 pt-6 pb-5">
|
|
<a href="Hub Landing presseportale.html" class="flex items-baseline gap-2">
|
|
<span class="text-[19px] font-bold tracking-[-0.4px] text-hub leading-none">presseportale<span class="text-accent">.com</span></span>
|
|
</a>
|
|
<div class="eyebrow muted mt-2">Publisher · Hub</div>
|
|
|
|
<!-- Aktive Firma / Konto-Switcher (FluxUI-Slot: header before nav) -->
|
|
<button class="mt-4 w-full grid items-center gap-2.5 px-3 py-2.5 bg-bg-card border border-bg-rule rounded-[4px] hover:border-hub/40 text-left"
|
|
style="grid-template-columns:auto 1fr auto;">
|
|
<span class="w-7 h-7 rounded-[3px] bg-hub-soft border border-hub-soft-2 flex items-center justify-center text-hub text-[11px] font-bold">TU</span>
|
|
<span class="min-w-0">
|
|
<span class="block text-[12.5px] font-semibold text-ink leading-tight truncate">Test User</span>
|
|
<span class="block text-[10.5px] text-ink-3 leading-tight mt-0.5 truncate">Keine Firma zugeordnet</span>
|
|
</span>
|
|
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" class="text-ink-3">
|
|
<path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M3 7.5l3-3 3 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" opacity="0.4"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<nav class="px-3 flex-1">
|
|
<div class="nav-section">Mein Bereich</div>
|
|
<div class="space-y-0.5 mb-5">
|
|
<a class="nav-item active" href="#">
|
|
<svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M2 7l6-5 6 5v7H2z" stroke="currentColor" stroke-width="1.4"/><path d="M6 14V9h4v5" stroke="currentColor" stroke-width="1.4"/></svg>
|
|
Übersicht
|
|
</a>
|
|
<a class="nav-item" href="#">
|
|
<svg class="ico" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="2.5" width="9" height="11" stroke="currentColor" stroke-width="1.4"/><path d="M11.5 5h2v8.5H4" stroke="currentColor" stroke-width="1.4"/><path d="M5 5.5h4M5 8h4M5 10.5h2.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
|
Meine Pressemitteilungen
|
|
<span class="badge hub ml-auto" style="font-size:9.5px;padding:1px 6px;letter-spacing:0.08em;">0</span>
|
|
</a>
|
|
<a class="nav-item" href="#">
|
|
<svg class="ico" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="3.5" width="11" height="10" stroke="currentColor" stroke-width="1.4"/><path d="M2.5 6h11" stroke="currentColor" stroke-width="1.4"/><path d="M6 9h1M9 9h1M6 11.5h1M9 11.5h1" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
|
Firmen
|
|
</a>
|
|
<a class="nav-item" href="#">
|
|
<svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M3 5h10l-1 9H4z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 5V3.5a2 2 0 014 0V5" stroke="currentColor" stroke-width="1.4"/></svg>
|
|
Buchungen & Add-ons
|
|
</a>
|
|
<span class="nav-item disabled">
|
|
<svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M3 13V8M7 13V5M11 13V9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
|
Statistiken
|
|
<span class="ml-auto text-[9.5px] tracking-[0.14em] uppercase font-semibold text-ink-4">bald</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="nav-section">Finanzen</div>
|
|
<div class="space-y-0.5 mb-5">
|
|
<span class="nav-item disabled">
|
|
<svg class="ico" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="5" stroke="currentColor" stroke-width="1.4"/><path d="M8 5.5v5M6 8h4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
|
Credits & Tarif
|
|
<span class="ml-auto text-[9.5px] tracking-[0.14em] uppercase font-semibold text-ink-4">bald</span>
|
|
</span>
|
|
<a class="nav-item" href="#">
|
|
<svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M3 2.5h7l3 3v8H3z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M10 2.5V5.5h3" stroke="currentColor" stroke-width="1.4"/><path d="M5.5 8h5M5.5 10.5h5M5.5 6h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
|
Rechnungen
|
|
</a>
|
|
<span class="nav-item disabled">
|
|
<svg class="ico" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="4.5" width="11" height="7.5" stroke="currentColor" stroke-width="1.4"/><path d="M2.5 7h11" stroke="currentColor" stroke-width="1.4"/></svg>
|
|
Zahlungsarten
|
|
<span class="ml-auto text-[9.5px] tracking-[0.14em] uppercase font-semibold text-ink-4">bald</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="nav-section">Konto</div>
|
|
<div class="space-y-0.5 mb-5">
|
|
<a class="nav-item" href="#">
|
|
<svg class="ico" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="6" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M3 13.5c.7-2.4 2.7-4 5-4s4.3 1.6 5 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
|
Profil
|
|
</a>
|
|
<a class="nav-item" href="#">
|
|
<svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M8 2l5 2v4c0 3-2 5-5 6-3-1-5-3-5-6V4z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 8l1.5 1.5L10.5 6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
Sicherheit
|
|
</a>
|
|
<a class="nav-item" href="#">
|
|
<svg class="ico" viewBox="0 0 16 16" fill="none"><circle cx="6" cy="8" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M8.5 8h5M11 8v2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
|
API & Integrationen
|
|
</a>
|
|
<span class="nav-item disabled">
|
|
<svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M3.5 7a4.5 4.5 0 119 0v3.5l1 1.5H2.5l1-1.5z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6.5 13a1.5 1.5 0 003 0" stroke="currentColor" stroke-width="1.4"/></svg>
|
|
Benachrichtigungen
|
|
<span class="ml-auto text-[9.5px] tracking-[0.14em] uppercase font-semibold text-ink-4">bald</span>
|
|
</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Testmodus-Block (war im Original „Zurück zum Admin") -->
|
|
<div class="px-4 pb-4">
|
|
<div class="text-ink-on-dark rounded-[5px] p-4 relative overflow-hidden" style="background:linear-gradient(135deg,#1A2540 0%,#243152 100%); border:1px solid #2A3142;">
|
|
<div class="absolute -top-6 -right-6 w-16 h-16 rounded-full opacity-50" style="background:#2E3D66;"></div>
|
|
<div class="absolute -bottom-8 -left-8 w-20 h-20 rounded-full opacity-30" style="background:#2E3D66;"></div>
|
|
<div class="relative">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="w-1.5 h-1.5 rounded-full animate-pulse" style="background:#D9A560;"></span>
|
|
<span class="eyebrow on-dark" style="color:#F4D89C;">Testmodus aktiv</span>
|
|
</div>
|
|
<div class="text-[12px] leading-[1.5] text-ink-on-dark-2">
|
|
Angemeldet als <strong class="text-white font-semibold">Test User</strong>.<br/>
|
|
Admin: <strong class="text-white font-semibold">Portal Admin</strong>
|
|
</div>
|
|
<button class="mt-3 w-full px-3 py-2 text-[12px] font-semibold rounded-[3px] transition-colors flex items-center justify-center gap-1.5" style="background:#F6F4EF;color:#1A2540;">
|
|
<svg width="11" height="11" viewBox="0 0 12 12" fill="none">
|
|
<path d="M9 3L3 9M3 9H8M3 9V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
Zurück zum Admin
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resources -->
|
|
<div class="px-3 pb-5 border-t border-bg-rule pt-4">
|
|
<div class="nav-section">Resources</div>
|
|
<div class="space-y-0.5">
|
|
<a class="nav-item" href="#"><svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M3 11l4 2 6-9-4-1z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>Tailwind CSS</a>
|
|
<a class="nav-item" href="#"><svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M8 2l5 2v4c0 3-2 5-5 6-3-1-5-3-5-6V4z" stroke="currentColor" stroke-width="1.3"/></svg>Hero Icons</a>
|
|
<a class="nav-item" href="#"><svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M9 2L4 9h3l-1 5 5-7H8z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>Flux UI</a>
|
|
<a class="nav-item" href="#"><svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M3 4l5-2 5 2v8l-5 2-5-2z" stroke="currentColor" stroke-width="1.3"/><path d="M3 4l5 2 5-2M8 6v8" stroke="currentColor" stroke-width="1.3"/></svg>Repository</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- =============================================
|
|
MAIN — Inhalt
|
|
============================================== -->
|
|
<main class="flex-1 min-w-0">
|
|
|
|
<!-- Topbar — sehr schlank; Brücken-Kontext + Kontoinfo rechts -->
|
|
<div class="bg-bg-elev border-b border-bg-rule">
|
|
<div class="px-10 py-3 flex items-center gap-6">
|
|
<!-- Breadcrumb -->
|
|
<div class="flex items-center gap-2 text-[12px] text-ink-3 font-medium">
|
|
<a href="Hub Landing presseportale.html" class="hover:text-hub">Hub</a>
|
|
<span class="text-ink-4">/</span>
|
|
<span class="text-ink-2">User Backend</span>
|
|
<span class="text-ink-4">/</span>
|
|
<span class="text-hub font-semibold">Übersicht</span>
|
|
</div>
|
|
|
|
<span class="flex-1"></span>
|
|
|
|
<!-- Reichweiten-Kontext (Brücke zur Hub-CI) -->
|
|
<span class="bridge-row">
|
|
<span class="dot-pe"></span> presseecho
|
|
<span class="text-ink-4 mx-1">·</span>
|
|
<span class="dot-bp"></span> businessportal24
|
|
</span>
|
|
|
|
<span class="w-px h-5 bg-bg-rule"></span>
|
|
|
|
<!-- Search (FluxUI input slot) -->
|
|
<div class="relative">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" class="absolute left-2.5 top-1/2 -translate-y-1/2 text-ink-3">
|
|
<circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.3"/>
|
|
<path d="M10.5 10.5L13 13" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
|
|
</svg>
|
|
<input class="pl-8 pr-3 py-1.5 w-[220px] bg-bg-card border border-bg-rule rounded-[4px] text-[12.5px] text-ink placeholder:text-ink-4 focus:outline-none focus:border-hub" placeholder="Suchen…" />
|
|
<span class="absolute right-2 top-1/2 -translate-y-1/2 text-[10px] font-mono text-ink-4 border border-bg-rule rounded px-1">⌘K</span>
|
|
</div>
|
|
|
|
<button class="relative w-8 h-8 flex items-center justify-center rounded-[4px] hover:bg-bg-card border border-transparent hover:border-bg-rule">
|
|
<svg width="15" height="15" viewBox="0 0 16 16" fill="none" class="text-ink-2">
|
|
<path d="M3.5 7a4.5 4.5 0 119 0v3.5l1 1.5H2.5l1-1.5z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
|
|
<path d="M6.5 13a1.5 1.5 0 003 0" stroke="currentColor" stroke-width="1.3"/>
|
|
</svg>
|
|
<span class="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-accent"></span>
|
|
</button>
|
|
|
|
<a href="#" class="btn-primary text-[12px] py-1.5 px-3.5">
|
|
<svg width="11" height="11" viewBox="0 0 12 12" fill="none">
|
|
<path d="M6 2v8M2 6h8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
|
</svg>
|
|
Neue Mitteilung
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Inhalt -->
|
|
<div class="px-10 py-8 space-y-6">
|
|
|
|
<!-- ============== PAGE HEADER ============== -->
|
|
<header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
|
|
<div class="min-w-0">
|
|
<div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
|
|
<span class="badge hub dot">User Backend</span>
|
|
<span class="eyebrow muted">Mein Bereich · A · 01</span>
|
|
</div>
|
|
<h1 class="text-[34px] font-bold tracking-[-0.7px] text-ink leading-[1.1] m-0">Mein Dashboard</h1>
|
|
<p class="text-[13.5px] text-ink-2 leading-[1.55] mt-2 m-0 max-w-[640px]">
|
|
Willkommen zurück, <strong class="font-semibold text-ink">Test User</strong>. Hier sehen Sie Status und Reichweite Ihres Kundenkontos für presseecho und businessportal24.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3 flex-shrink-0">
|
|
<!-- Zeitraum-Filter (FluxUI dropdown-style) -->
|
|
<button class="btn-secondary whitespace-nowrap">
|
|
<svg width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="3.5" width="11" height="10" stroke="currentColor" stroke-width="1.3"/><path d="M2.5 6h11M5 2v3M11 2v3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
|
Diese Woche
|
|
<svg width="10" height="10" viewBox="0 0 12 12" fill="none"><path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
|
|
<!-- Firma-zuordnen-Status — als Banner-Pille, statt im Karte-Header eingesperrt -->
|
|
<span class="inline-flex items-center gap-2 px-3 py-1.5 bg-warn-soft border border-warn/30 text-accent rounded-[4px] text-[12px] font-semibold whitespace-nowrap">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" class="flex-shrink-0"><path d="M8 2l6 11H2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 7v3M8 11.5v.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
|
Keine Firma zugeordnet
|
|
<a href="#" class="underline underline-offset-[3px] decoration-accent/40 hover:decoration-accent">zuordnen →</a>
|
|
</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ============== STAT-CARDS — KPI-Reihe ============== -->
|
|
<section class="grid gap-4" style="grid-template-columns:repeat(4,1fr);">
|
|
|
|
<article class="stat-card is-primary">
|
|
<span class="stat-strip"></span>
|
|
<div class="flex items-baseline justify-between">
|
|
<div class="stat-label" style="color:#7B8FBF;">Gesamt</div>
|
|
<span class="text-[10.5px] font-mono text-ink-3 tracking-[0.14em] uppercase">2026</span>
|
|
</div>
|
|
<div class="stat-num">0</div>
|
|
<div class="mt-3 flex items-center gap-2 text-[11.5px] text-ink-3">
|
|
<span class="flex items-center gap-1">
|
|
<svg width="9" height="9" viewBox="0 0 10 10" fill="none"><path d="M5 8V2M2 5l3-3 3 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
|
0 ggü. Vormonat
|
|
</span>
|
|
</div>
|
|
<!-- Mini Sparkline placeholder -->
|
|
<svg class="absolute right-3 bottom-3 opacity-50" width="80" height="22" viewBox="0 0 80 22" fill="none">
|
|
<path d="M0 18 L10 17 L20 18 L30 16 L40 18 L50 15 L60 17 L70 14 L80 16" stroke="#1A2540" stroke-width="1.2" fill="none"/>
|
|
<circle cx="80" cy="16" r="1.8" fill="#1A2540"/>
|
|
</svg>
|
|
</article>
|
|
|
|
<article class="stat-card is-ok">
|
|
<span class="stat-strip"></span>
|
|
<div class="flex items-baseline justify-between">
|
|
<div class="stat-label">Veröffentlicht</div>
|
|
<span class="badge ok" style="font-size:9.5px;padding:1px 6px;">live</span>
|
|
</div>
|
|
<div class="stat-num" style="color:#6BD498;">0</div>
|
|
<div class="mt-3 flex items-center gap-2 text-[11.5px] text-ink-3">
|
|
auf beiden Portalen
|
|
</div>
|
|
<svg class="absolute right-3 bottom-3 opacity-50" width="80" height="22" viewBox="0 0 80 22" fill="none">
|
|
<path d="M0 19 L10 18 L20 19 L30 17 L40 16 L50 14 L60 13 L70 11 L80 10" stroke="#2E8540" stroke-width="1.2" fill="none"/>
|
|
<circle cx="80" cy="10" r="1.8" fill="#2E8540"/>
|
|
</svg>
|
|
</article>
|
|
|
|
<article class="stat-card is-warn">
|
|
<span class="stat-strip"></span>
|
|
<div class="flex items-baseline justify-between">
|
|
<div class="stat-label">In Prüfung</div>
|
|
<span class="badge warn" style="font-size:9.5px;padding:1px 6px;">Ø 4 h</span>
|
|
</div>
|
|
<div class="stat-num" style="color:#D9A560;">0</div>
|
|
<div class="mt-3 flex items-center gap-2 text-[11.5px] text-ink-3">
|
|
redaktionelle Prüfung
|
|
</div>
|
|
<svg class="absolute right-3 bottom-3 opacity-50" width="80" height="22" viewBox="0 0 80 22" fill="none">
|
|
<path d="M0 16 L10 17 L20 14 L30 18 L40 13 L50 17 L60 12 L70 15 L80 11" stroke="#A87A1F" stroke-width="1.2" fill="none"/>
|
|
<circle cx="80" cy="11" r="1.8" fill="#A87A1F"/>
|
|
</svg>
|
|
</article>
|
|
|
|
<article class="stat-card is-muted">
|
|
<span class="stat-strip"></span>
|
|
<div class="flex items-baseline justify-between">
|
|
<div class="stat-label">Entwürfe</div>
|
|
<span class="text-[10.5px] font-mono text-ink-3 tracking-[0.14em] uppercase">privat</span>
|
|
</div>
|
|
<div class="stat-num" style="color:#8E8B82;">0</div>
|
|
<div class="mt-3 flex items-center gap-2 text-[11.5px] text-ink-3">
|
|
gespeichert, nicht eingereicht
|
|
</div>
|
|
<svg class="absolute right-3 bottom-3 opacity-50" width="80" height="22" viewBox="0 0 80 22" fill="none">
|
|
<path d="M0 12 L10 12 L20 12 L30 12 L40 12 L50 12 L60 12 L70 12 L80 12" stroke="#8A918D" stroke-width="1.2" stroke-dasharray="2 2" fill="none"/>
|
|
</svg>
|
|
</article>
|
|
</section>
|
|
|
|
<!-- ============== ZWEISPALTEN-GRID ============== -->
|
|
<section class="grid gap-6" style="grid-template-columns:2fr 1fr;">
|
|
|
|
<!-- ============== LINKS: Pressemitteilungen-Liste / Empty ============== -->
|
|
<article class="panel">
|
|
<div class="panel-head">
|
|
<div class="flex items-center gap-3">
|
|
<span class="section-eyebrow">Meine letzten Pressemitteilungen</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-[11.5px] text-ink-3">0 von 0</span>
|
|
<a href="#" class="text-[12px] font-semibold text-hub hover:underline underline-offset-[3px] decoration-hub/30">Alle anzeigen →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty State — sauber, ohne überlappende Skelett-Zeilen -->
|
|
<div class="px-10 py-14 flex flex-col items-center text-center">
|
|
<!-- Dezentes Tabellen-Icon -->
|
|
<div class="w-16 h-16 rounded-[6px] bg-hub-soft border border-hub-soft-2 flex items-center justify-center text-hub mb-5 relative">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
|
<rect x="3" y="4" width="14" height="16" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M17 7h4v13H6" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M6 8h8M6 11h8M6 14h5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
|
|
</svg>
|
|
<span class="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-accent text-white text-[10px] font-bold flex items-center justify-center font-mono">0</span>
|
|
</div>
|
|
<div class="text-[16px] font-semibold text-ink m-0">Noch keine Pressemitteilungen</div>
|
|
<p class="text-[13px] text-ink-3 leading-[1.55] mt-2 m-0 max-w-[460px]">
|
|
Starten Sie mit einer ersten Mitteilung für die aktive Firma oder Ihr Kundenkonto. Veröffentlichung erfolgt nach redaktioneller Prüfung auf beiden Portalen.
|
|
</p>
|
|
<div class="mt-6 flex items-center gap-2.5">
|
|
<a href="#" class="btn-primary">
|
|
<svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M6 2v8M2 6h8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
|
|
Erste Pressemitteilung erstellen
|
|
</a>
|
|
<a href="#" class="btn-secondary">Vorlage öffnen</a>
|
|
</div>
|
|
|
|
<!-- Vorgeschlagene Schritte -->
|
|
<div class="mt-9 grid gap-3 w-full max-w-[560px]" style="grid-template-columns:repeat(3,1fr);">
|
|
<div class="text-left px-3 py-2.5 bg-bg-elev border border-bg-rule rounded-[3px]">
|
|
<div class="font-mono text-[9.5px] tracking-[0.16em] text-accent font-bold mb-1">01</div>
|
|
<div class="text-[11.5px] font-semibold text-ink leading-tight">Firma zuordnen</div>
|
|
</div>
|
|
<div class="text-left px-3 py-2.5 bg-bg-elev border border-bg-rule rounded-[3px]">
|
|
<div class="font-mono text-[9.5px] tracking-[0.16em] text-accent font-bold mb-1">02</div>
|
|
<div class="text-[11.5px] font-semibold text-ink leading-tight">Mitteilung verfassen</div>
|
|
</div>
|
|
<div class="text-left px-3 py-2.5 bg-bg-elev border border-bg-rule rounded-[3px]">
|
|
<div class="font-mono text-[9.5px] tracking-[0.16em] text-accent font-bold mb-1">03</div>
|
|
<div class="text-[11.5px] font-semibold text-ink leading-tight">Zur Prüfung senden</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-5 py-3 bg-bg-elev border-t border-bg-rule flex items-center gap-2.5 text-[11.5px] text-ink-3">
|
|
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" class="text-hub flex-shrink-0">
|
|
<path d="M8 1.5l5.5 2.5v4c0 3.3-2.2 5.8-5.5 6.5C4.7 13.8 2.5 11.3 2.5 8V4z" stroke="currentColor" stroke-width="1.3" fill="none"/>
|
|
<path d="M5.5 8l2 2 3.5-4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Tipp: Geprüfte Mitteilungen erscheinen i. d. R. binnen <strong class="text-ink-2 font-semibold">4 Stunden</strong> werktags auf beiden Portalen.
|
|
</div>
|
|
</article>
|
|
|
|
<!-- ============== RECHTS: Datenqualität ============== -->
|
|
<article class="panel">
|
|
<div class="panel-head">
|
|
<span class="section-eyebrow">Datenqualität</span>
|
|
<span class="badge warn dot">2 offen</span>
|
|
</div>
|
|
<div class="px-5 py-5">
|
|
<p class="text-[12px] text-ink-3 leading-[1.55] m-0 mb-4">
|
|
Diese Hinweise helfen, Ihr User Backend vollständig und sauber zu halten.
|
|
</p>
|
|
|
|
<div class="space-y-3">
|
|
<div class="hint-card">
|
|
<span class="hint-ico">
|
|
<svg width="18" height="18" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="6" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M3 13.5c.7-2.4 2.7-4 5-4s4.3 1.6 5 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
|
</span>
|
|
<div class="min-w-0">
|
|
<div class="flex items-baseline justify-between gap-3">
|
|
<div class="text-[13px] font-semibold text-ink leading-tight">Profil unvollständig</div>
|
|
<span class="font-mono text-[10px] text-ink-3 tracking-[0.10em] uppercase whitespace-nowrap flex-shrink-0">60 %</span>
|
|
</div>
|
|
<div class="mt-2 h-1 w-full rounded-full bg-bg-rule-2 overflow-hidden">
|
|
<div class="h-full rounded-full bg-accent" style="width:60%;"></div>
|
|
</div>
|
|
<p class="text-[11.5px] text-ink-3 leading-[1.5] mt-2 m-0">
|
|
Vorname, Telefon und Pressekontakt fehlen für saubere Kundenakte.
|
|
</p>
|
|
<a href="#" class="inline-flex items-center gap-1 text-[11.5px] font-semibold text-accent mt-2 hover:underline underline-offset-[3px] decoration-accent/40">Profil öffnen →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hint-card">
|
|
<span class="hint-ico">
|
|
<svg width="18" height="18" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="3.5" width="11" height="10" stroke="currentColor" stroke-width="1.4"/><path d="M2.5 6h11" stroke="currentColor" stroke-width="1.4"/></svg>
|
|
</span>
|
|
<div class="min-w-0">
|
|
<div class="flex items-baseline justify-between gap-3">
|
|
<div class="text-[13px] font-semibold text-ink leading-tight">Rechnungsadresse fehlt</div>
|
|
<span class="font-mono text-[10px] text-ink-3 tracking-[0.10em] uppercase whitespace-nowrap flex-shrink-0">0 %</span>
|
|
</div>
|
|
<div class="mt-2 h-1 w-full rounded-full bg-bg-rule-2 overflow-hidden">
|
|
<div class="h-full rounded-full bg-accent" style="width:5%;"></div>
|
|
</div>
|
|
<p class="text-[11.5px] text-ink-3 leading-[1.5] mt-2 m-0">
|
|
Hinterlegen Sie eine Rechnungsadresse, damit spätere Buchungen sauber abgerechnet werden können.
|
|
</p>
|
|
<a href="#" class="inline-flex items-center gap-1 text-[11.5px] font-semibold text-accent mt-2 hover:underline underline-offset-[3px] decoration-accent/40">Rechnungsadresse ergänzen →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<!-- ============== UNTERER GRID: FIRMEN + REICHWEITE / AKTIVITÄT ============== -->
|
|
<section class="grid gap-6" style="grid-template-columns:2fr 1fr;">
|
|
|
|
<!-- Firmen Card -->
|
|
<article class="panel">
|
|
<div class="panel-head">
|
|
<span class="section-eyebrow">Meine Firmen</span>
|
|
<div class="flex items-center gap-3">
|
|
<span class="badge hub" style="font-size:9.5px;padding:1px 6px;">0 zugeordnet</span>
|
|
<a href="#" class="text-[12px] font-semibold text-hub hover:underline underline-offset-[3px] decoration-hub/30">Profil & Firma verwalten →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="grid gap-3" style="grid-template-columns:1fr 1fr;">
|
|
|
|
<!-- Empty-Slot Firma 1 -->
|
|
<div class="relative border border-dashed border-bg-rule rounded-[5px] p-5 hover:border-hub/50 hover:bg-bg-elev transition-colors">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<span class="w-10 h-10 rounded-[4px] border border-bg-rule bg-bg-elev flex items-center justify-center text-ink-4">
|
|
<svg width="18" height="18" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="3.5" width="11" height="10" stroke="currentColor" stroke-width="1.3"/><path d="M2.5 6h11M6 9h1M9 9h1M6 11.5h1M9 11.5h1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
|
</span>
|
|
<div>
|
|
<div class="text-[13.5px] font-semibold text-ink-2">Firma hinzufügen</div>
|
|
<div class="text-[11px] text-ink-3 mt-0.5">Slot frei · 1 von 3</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-[11.5px] text-ink-3 leading-[1.5] m-0">
|
|
Pressestellen, für die Sie Mitteilungen erstellen — mit eigenem Logo, Kontaktperson und Themen-Tags.
|
|
</p>
|
|
<a href="#" class="absolute top-3 right-3 inline-flex items-center justify-center w-7 h-7 rounded-[3px] bg-bg-card border border-bg-rule text-hub hover:border-hub">
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 2v8M2 6h8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Hinweis -->
|
|
<div class="bg-bg-elev border border-bg-rule rounded-[5px] p-5">
|
|
<div class="eyebrow muted mb-2">Hinweis</div>
|
|
<div class="text-[13px] text-ink-2 leading-[1.55] m-0">
|
|
Keine Firmen zugeordnet. Wenn hier eine Firma fehlen sollte, prüfen Sie bitte Ihr Profil oder wenden Sie sich an den Support.
|
|
</div>
|
|
<div class="mt-3 flex items-center gap-2">
|
|
<a href="#" class="btn-secondary" style="padding:6px 10px;font-size:11.5px;">Profil prüfen</a>
|
|
<a href="/cdn-cgi/l/email-protection#e5969095958a9791a5959780969680958a9791848980cb868a88" class="text-[11.5px] font-semibold text-ink-3 hover:text-hub">Support kontaktieren</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Aktivität / Bridge -->
|
|
<article class="panel-dark">
|
|
<div class="panel-head">
|
|
<span class="eyebrow on-dark">Brand-Bridge</span>
|
|
<span class="font-mono text-[10px] text-ink-on-dark-3 tracking-[0.14em] uppercase">A · B</span>
|
|
</div>
|
|
<div class="px-5 py-5">
|
|
<div class="text-[12.5px] leading-[1.55] text-ink-on-dark-2 m-0 mb-4">
|
|
Ein Konto, beide Portale — Veröffentlichungen werden parallel auf presseecho und businessportal24 ausgespielt.
|
|
</div>
|
|
|
|
<div class="grid gap-3" style="grid-template-columns:1fr 1fr;">
|
|
<div class="rounded-[4px] px-3.5 py-3 border border-white/5" style="background:#1A2540;">
|
|
<div class="flex items-center gap-2 mb-1.5">
|
|
<span class="dot-pe"></span>
|
|
<span class="text-[11px] font-bold tracking-[0.14em] uppercase text-white/85">presseecho</span>
|
|
</div>
|
|
<div class="font-mono text-[15px] font-semibold text-white" style="font-variant-numeric:tabular-nums;">verbunden</div>
|
|
<div class="text-[10.5px] text-ink-on-dark-3 mt-0.5">Archiv · Branchen-Tiefe</div>
|
|
</div>
|
|
<div class="rounded-[4px] px-3.5 py-3 border border-white/5" style="background:#1A2540;">
|
|
<div class="flex items-center gap-2 mb-1.5">
|
|
<span class="dot-bp"></span>
|
|
<span class="text-[11px] font-bold tracking-[0.14em] uppercase text-white/85">businessportal24</span>
|
|
</div>
|
|
<div class="font-mono text-[15px] font-semibold text-white" style="font-variant-numeric:tabular-nums;">verbunden</div>
|
|
<div class="text-[10.5px] text-ink-on-dark-3 mt-0.5">Wirtschaft · Live</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="mt-5 mb-4" style="border:0;height:1px;background:rgba(255,255,255,.10);" />
|
|
|
|
<div class="space-y-2 text-[11.5px] text-ink-on-dark-2">
|
|
<div class="flex items-center justify-between">
|
|
<span>API-Status</span>
|
|
<span class="flex items-center gap-1.5 text-white"><span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>operational</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span>Letzte Synchronisation</span>
|
|
<span class="font-mono text-white">vor 2 min</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span>Tarif</span>
|
|
<span class="font-mono text-white">Starter</span>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="Hub Landing presseportale.html#tarife" class="mt-5 inline-flex items-center gap-1.5 text-[11.5px] font-semibold text-white hover:underline underline-offset-[3px] decoration-white/30">
|
|
Tarife & Add-ons ansehen →
|
|
</a>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<!-- ============== FUSSZEILE ============== -->
|
|
<footer class="flex items-center justify-between pt-4 pb-2 text-[11px] text-ink-3 border-t border-bg-rule">
|
|
<span>© 2026 presseportale.com · Publisher-Hub</span>
|
|
<span class="flex items-center gap-5">
|
|
<a href="#" class="hover:text-hub">Tastenkürzel</a>
|
|
<a href="#" class="hover:text-hub">Changelog</a>
|
|
<a href="#" class="hover:text-hub">Statusseite</a>
|
|
<a href="/cdn-cgi/l/email-protection#21525451514e535561515344525244514e5355404d440f424e4c" class="hover:text-hub">Support</a>
|
|
</span>
|
|
</footer>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
|
|
</html>
|