976 lines
62 KiB
HTML
976 lines
62 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 — Neue Pressemitteilung</title>
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=JetBrains+Mono:wght@400;500;600&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":"#E2DDD0","bg-rule-2":"#EDE7D7",
|
||
"bg-card":"#FFFFFF","bg-card-warm":"#EFEADC",
|
||
hub:"#1A2540","hub-2":"#243152","hub-3":"#2E3D66",
|
||
"hub-soft":"#E5E9F1","hub-soft-2":"#CFD6E4","hub-line":"#7B8FBF",
|
||
accent:"#B07A3A","accent-deep":"#8A5E27","accent-soft":"#F1E6D3",
|
||
ink:"#1A1F1C","ink-2":"#3A413D","ink-3":"#5A6360","ink-4":"#8A918D",
|
||
"ink-on-dark":"#F6F4EF","ink-on-dark-2":"#B2B9C7","ink-on-dark-3":"#7B8FBF",
|
||
ok:"#2E8540","ok-soft":"#E2F1E5",
|
||
warn:"#A87A1F","warn-soft":"#F6EAC8",
|
||
err:"#A8331F","err-soft":"#F4DAD2",
|
||
},
|
||
fontFamily:{
|
||
sans:['"Inter Tight"','Inter','system-ui','sans-serif'],
|
||
serif:['"Source Serif 4"','Georgia','serif'],
|
||
mono:['"JetBrains Mono"','"SF Mono"','ui-monospace','monospace'],
|
||
},
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
html,body{margin:0;padding:0;}
|
||
body{background:#E8E4DA;font-family:"Inter Tight",system-ui,sans-serif;}
|
||
|
||
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;color:#1A2540;}
|
||
.eyebrow.muted{color:#5A6360;letter-spacing:.16em;font-weight:600;font-size:10px;}
|
||
.eyebrow.accent{color:#8A5E27;}
|
||
.eyebrow.on-dark{color:#7B8FBF;}
|
||
|
||
.rule{height:1px;background:#E2DDD0;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:#3A413D;transition:background .12s,color .12s;position:relative;}
|
||
.nav-item:hover{background:#F6F4EF;color:#1A2540;}
|
||
.nav-item.active{background:#E5E9F1;color:#1A2540;font-weight:600;}
|
||
.nav-item.active::before{content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:2px;background:#1A2540;border-radius:0 2px 2px 0;}
|
||
.nav-item.disabled{color:#8A918D;cursor:default;}
|
||
.nav-item.disabled:hover{background:transparent;color:#8A918D;}
|
||
.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:.18em;text-transform:uppercase;color:#8A918D;padding:0 12px 6px;}
|
||
|
||
/* Panels */
|
||
.panel{background:#FFFFFF;border:1px solid #E2DDD0;border-radius:6px;}
|
||
.panel-warm{background:#FBFAF6;border:1px solid #E2DDD0;border-radius:6px;}
|
||
|
||
/* Buttons */
|
||
.btn-primary{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:10px 16px;background:#1A2540;color:#fff;border-radius:4px;font-size:13px;font-weight:600;transition:background .15s;}
|
||
.btn-primary:hover{background:#243152;}
|
||
.btn-primary.full{width:100%;padding:11px 16px;}
|
||
.btn-secondary{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:8px 14px;background:#fff;color:#1A2540;border:1px solid #CFD6E4;border-radius:4px;font-size:12.5px;font-weight:600;transition:border-color .15s,background .15s;}
|
||
.btn-secondary:hover{border-color:#1A2540;background:#F6F4EF;}
|
||
.btn-secondary.full{width:100%;}
|
||
.btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;color:#3A413D;border-radius:4px;font-size:12px;font-weight:500;transition:background .12s,color .12s;}
|
||
.btn-ghost:hover{background:#F6F4EF;color:#1A2540;}
|
||
|
||
/* Badges */
|
||
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;}
|
||
.badge.warn{background:#F6EAC8;color:#8A5E27;}
|
||
.badge.ok{background:#E2F1E5;color:#1F5E2E;}
|
||
.badge.err{background:#F4DAD2;color:#8E2A19;}
|
||
.badge.hub{background:#E5E9F1;color:#1A2540;}
|
||
.badge.muted{background:#EFEADC;color:#5A6360;}
|
||
.badge.dot::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor;}
|
||
|
||
/* BALD-Badge */
|
||
.badge-bald{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:99px;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:#F1E6D3;color:#8A5E27;border:1px dashed #E1C883;}
|
||
.badge-bald::before{content:"";width:4px;height:4px;border-radius:99px;background:#B07A3A;}
|
||
|
||
/* Bridge ribbon */
|
||
.bridge-row{display:inline-flex;align-items:center;gap:6px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;color:#5A6360;}
|
||
.dot-pe{width:6px;height:6px;border-radius:99px;background:#1F4D3A;}
|
||
.dot-bp{width:6px;height:6px;border-radius:99px;background:#C84A1E;}
|
||
|
||
/* Editor wrapper */
|
||
.field-label{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#5A6360;margin-bottom:8px;}
|
||
.field-label .req{color:#A8331F;font-weight:700;letter-spacing:0;}
|
||
.field-help{font-size:11.5px;color:#8A918D;margin-top:6px;line-height:1.5;}
|
||
.field-help.warn{color:#8A5E27;}
|
||
.field-counter{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;color:#8A918D;font-variant-numeric:tabular-nums;}
|
||
|
||
/* Inputs */
|
||
.inp{
|
||
width:100%;padding:10px 12px;background:#fff;border:1px solid #CFD6E4;border-radius:4px;
|
||
font-size:13px;color:#1A1F1C;transition:border-color .15s,box-shadow .15s;font-family:inherit;
|
||
}
|
||
.inp:focus{outline:none;border-color:#1A2540;box-shadow:0 0 0 3px rgba(26,37,64,.07);}
|
||
.inp::placeholder{color:#8A918D;}
|
||
.inp.title{font-size:24px;font-weight:700;letter-spacing:-.5px;line-height:1.2;padding:14px 16px;color:#1A1F1C;font-family:"Source Serif 4",Georgia,serif;}
|
||
.inp.title::placeholder{color:#B5BCB9;font-weight:400;}
|
||
.inp.subtitle{font-size:15px;font-weight:500;line-height:1.4;padding:11px 14px;color:#3A413D;font-family:"Source Serif 4",Georgia,serif;}
|
||
.inp.subtitle::placeholder{color:#B5BCB9;font-weight:400;}
|
||
.inp.small{padding:7px 10px;font-size:12.5px;}
|
||
|
||
.select{
|
||
width:100%;padding:8px 30px 8px 12px;background:#fff;border:1px solid #CFD6E4;border-radius:4px;
|
||
font-size:12.5px;color:#1A1F1C;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%235A6360' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||
background-repeat:no-repeat;background-position:right 10px center;cursor:pointer;
|
||
}
|
||
.select:focus{outline:none;border-color:#1A2540;}
|
||
|
||
/* Toolbar / editor */
|
||
.toolbar{display:flex;align-items:center;gap:2px;padding:7px 10px;border-bottom:1px solid #E2DDD0;background:#FBFAF6;border-radius:4px 4px 0 0;flex-wrap:wrap;}
|
||
.tb-btn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 7px;border-radius:3px;font-size:12.5px;font-weight:600;color:#3A413D;border:1px solid transparent;transition:background .12s,color .12s,border-color .12s;}
|
||
.tb-btn:hover{background:#fff;border-color:#CFD6E4;color:#1A2540;}
|
||
.tb-btn.is-active{background:#1A2540;color:#fff;}
|
||
.tb-btn .lbl{font-size:11px;letter-spacing:.04em;}
|
||
.tb-sep{width:1px;height:18px;background:#E2DDD0;margin:0 4px;}
|
||
|
||
.editor-body{padding:18px 20px;min-height:340px;font-family:"Source Serif 4",Georgia,serif;font-size:15px;line-height:1.65;color:#1A1F1C;}
|
||
.editor-body h2{font-family:"Source Serif 4",Georgia,serif;font-size:18px;font-weight:700;color:#1A1F1C;margin:18px 0 8px;letter-spacing:-.2px;}
|
||
.editor-body p{margin:0 0 12px;}
|
||
.editor-body p.lede{font-weight:500;font-size:16px;color:#1A1F1C;}
|
||
.editor-body strong{color:#1A1F1C;font-weight:700;}
|
||
.editor-body em{font-style:italic;}
|
||
.editor-body ul{margin:6px 0 14px;padding-left:22px;}
|
||
.editor-body ul li{margin:4px 0;}
|
||
.editor-body a{color:#8A5E27;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:rgba(138,94,39,.45);}
|
||
.editor-cursor{display:inline-block;width:1px;height:18px;background:#1A2540;vertical-align:-3px;animation:blink 1s steps(2) infinite;margin-left:1px;}
|
||
@keyframes blink{50%{opacity:0;}}
|
||
|
||
/* Media tiles */
|
||
.media-tile{position:relative;border:1px solid #E2DDD0;border-radius:5px;background:#FBFAF6;overflow:hidden;}
|
||
.media-thumb{aspect-ratio:16/10;background:#EDE7D7;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
|
||
.media-meta{padding:9px 11px;}
|
||
.media-cap{font-size:11.5px;color:#3A413D;line-height:1.4;}
|
||
.media-alt{font-size:10.5px;color:#8A918D;margin-top:3px;font-style:italic;line-height:1.4;}
|
||
.media-cover-flag{position:absolute;top:8px;left:8px;}
|
||
.media-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;}
|
||
.media-act{width:24px;height:24px;border-radius:3px;background:rgba(26,31,28,.62);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);}
|
||
.media-act:hover{background:rgba(26,37,64,.85);}
|
||
|
||
/* Drop zone */
|
||
.dropzone{border:1.5px dashed #CFD6E4;border-radius:5px;background:#FBFAF6;padding:18px 16px;display:flex;align-items:center;justify-content:center;gap:14px;text-align:left;transition:border-color .15s,background .15s;}
|
||
.dropzone:hover{border-color:#1A2540;background:#F6F4EF;}
|
||
.dropzone .dz-ico{width:42px;height:42px;border-radius:5px;background:#E5E9F1;color:#1A2540;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
|
||
|
||
/* Right sidebar — meta blocks */
|
||
.meta-card{background:#fff;border:1px solid #E2DDD0;border-radius:5px;padding:14px 16px;}
|
||
.meta-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
|
||
.meta-title{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#1A2540;}
|
||
.meta-title .num{font-family:"JetBrains Mono",ui-monospace,monospace;color:#8A918D;margin-right:6px;letter-spacing:.06em;}
|
||
|
||
/* Checklist */
|
||
.check-row{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:12.5px;}
|
||
.check-row .ic{width:16px;height:16px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
|
||
.check-row.ok .ic{background:#E2F1E5;color:#1F5E2E;}
|
||
.check-row.warn .ic{background:#F6EAC8;color:#8A5E27;}
|
||
.check-row.err .ic{background:#F4DAD2;color:#8E2A19;}
|
||
.check-row .lbl{flex:1;color:#1A1F1C;line-height:1.4;}
|
||
.check-row .lbl .sub{display:block;font-size:11px;color:#5A6360;margin-top:1px;}
|
||
.check-row.ok .lbl{color:#3A413D;}
|
||
|
||
/* Portal chooser */
|
||
.portal-opt{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid #E2DDD0;border-radius:4px;background:#FBFAF6;cursor:pointer;transition:border-color .12s,background .12s;}
|
||
.portal-opt:hover{border-color:#1A2540;}
|
||
.portal-opt.is-checked{border-color:#1A2540;background:#fff;box-shadow:inset 0 0 0 1px #1A2540;}
|
||
.portal-opt .pcheck{width:14px;height:14px;border:1.5px solid #CFD6E4;border-radius:3px;background:#fff;flex-shrink:0;margin-top:2px;position:relative;}
|
||
.portal-opt.is-checked .pcheck{background:#1A2540;border-color:#1A2540;}
|
||
.portal-opt.is-checked .pcheck::after{content:"";position:absolute;left:3px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);}
|
||
.portal-opt .ptitle{font-size:12.5px;font-weight:600;color:#1A1F1C;display:flex;align-items:center;gap:7px;}
|
||
.portal-opt .psub{font-size:11px;color:#5A6360;margin-top:2px;line-height:1.4;}
|
||
|
||
/* Tag chip */
|
||
.tag-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 4px 3px 9px;background:#E5E9F1;color:#1A2540;border-radius:3px;font-size:11.5px;font-weight:500;}
|
||
.tag-chip .x{width:16px;height:16px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;color:#1A2540;transition:background .12s;}
|
||
.tag-chip .x:hover{background:#CFD6E4;}
|
||
|
||
/* Boilerplate panel */
|
||
.boiler{background:#FBFAF6;border:1px dashed #CFD6E4;border-radius:5px;padding:14px 16px;}
|
||
|
||
/* Autosave row */
|
||
.autosave{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#5A6360;}
|
||
.autosave .dot{width:6px;height:6px;border-radius:99px;background:#2E8540;box-shadow:0 0 0 3px rgba(46,133,64,.15);}
|
||
|
||
/* Tabs (für Pressekontakt) */
|
||
.tab-mini{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;font-size:11.5px;font-weight:600;color:#5A6360;border-radius:3px;cursor:pointer;}
|
||
.tab-mini:hover{color:#1A2540;}
|
||
.tab-mini.is-active{background:#E5E9F1;color:#1A2540;}
|
||
|
||
/* Collapsible */
|
||
.collapse-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
|
||
.collapse-head:hover .meta-title{color:#243152;}
|
||
.chev{width:16px;height:16px;color:#5A6360;transition:transform .15s;}
|
||
.meta-card.is-open .chev{transform:rotate(180deg);}
|
||
|
||
/* AI inline hint (BALD) */
|
||
.ai-hint{display:flex;align-items:center;gap:9px;padding:8px 11px;background:#FBF6EB;border:1px dashed #E1C883;border-radius:4px;font-size:11.5px;color:#8A5E27;line-height:1.45;}
|
||
.ai-hint .ai-ico{width:22px;height:22px;border-radius:4px;background:#F1E6D3;color:#8A5E27;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
|
||
.ai-hint .ai-cta{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:#5A6360;padding:3px 7px;border:1px solid #E2DDD0;border-radius:99px;background:#fff;cursor:not-allowed;}
|
||
|
||
/* Char counter pill */
|
||
.meter{display:inline-flex;align-items:center;gap:6px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;color:#5A6360;font-variant-numeric:tabular-nums;}
|
||
.meter .bar{position:relative;width:60px;height:4px;background:#EDE7D7;border-radius:99px;overflow:hidden;}
|
||
.meter .bar i{position:absolute;left:0;top:0;bottom:0;background:#1A2540;border-radius:99px;}
|
||
.meter.good .bar i{background:#2E8540;}
|
||
.meter.warn .bar i{background:#A87A1F;}
|
||
|
||
/* Sticky aside helper */
|
||
@media (min-width: 1280px){
|
||
.sticky-aside{position:sticky;top:18px;}
|
||
}
|
||
|
||
/* mark / highlight in editor */
|
||
.editor-body mark.suggest{background:linear-gradient(transparent 55%, #F6EAC8 55%);padding:0 1px;border-radius:1px;}
|
||
</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:1500px;">
|
||
|
||
<!-- ============== SIDEBAR ============== -->
|
||
<aside class="bg-bg-elev border-r border-bg-rule flex flex-col" style="width:260px;">
|
||
<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>
|
||
|
||
<button class="mt-4 w-full grid items-center gap-2.5 px-3 py-2.5 bg-white 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">Tegernseer Brauerei AG +1</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" href="User Dashboard presseportale.html">
|
||
<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 active" href="User Pressemitteilungen presseportale.html">
|
||
<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;">25</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>
|
||
</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>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="px-4 pb-4">
|
||
<div class="bg-hub text-ink-on-dark rounded-[5px] p-4 relative overflow-hidden">
|
||
<div class="absolute -top-6 -right-6 w-16 h-16 rounded-full bg-hub-3 opacity-50"></div>
|
||
<div class="absolute -bottom-8 -left-8 w-20 h-20 rounded-full bg-hub-3 opacity-30"></div>
|
||
<div class="relative">
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></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 bg-white text-hub text-[12px] font-semibold rounded-[3px] hover:bg-bg transition-colors flex items-center justify-center gap-1.5">
|
||
<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>
|
||
</aside>
|
||
|
||
<!-- ============== MAIN ============== -->
|
||
<main class="flex-1 min-w-0" data-screen-label="01 Neue Mitteilung erstellen">
|
||
|
||
<!-- Topbar -->
|
||
<div class="bg-bg-elev border-b border-bg-rule">
|
||
<div class="px-10 py-3 flex items-center gap-6">
|
||
<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>
|
||
<a href="User Dashboard presseportale.html" class="hover:text-hub">User Backend</a>
|
||
<span class="text-ink-4">/</span>
|
||
<a href="User Pressemitteilungen presseportale.html" class="hover:text-hub">Pressemitteilungen</a>
|
||
<span class="text-ink-4">/</span>
|
||
<span class="text-hub font-semibold">Neue Mitteilung</span>
|
||
</div>
|
||
|
||
<span class="flex-1"></span>
|
||
|
||
<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>
|
||
|
||
<span class="autosave">
|
||
<span class="dot"></span>
|
||
Zuletzt gespeichert vor <strong class="text-ink-2 font-semibold mx-1">8 Sek.</strong>
|
||
<span class="text-ink-4">·</span>
|
||
<span class="font-mono text-[10.5px] text-ink-4">PM-DRAFT-2026-0026</span>
|
||
</span>
|
||
|
||
<span class="w-px h-5 bg-bg-rule"></span>
|
||
|
||
<button class="btn-ghost">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M2 8l4 4 8-8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
Speichern
|
||
</button>
|
||
<button class="btn-secondary">
|
||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.3"/><path d="M5 8.5L7 10.5 11 6.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
Vorschau
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Inhalt -->
|
||
<div class="px-10 py-8">
|
||
|
||
<!-- ============== PAGE HEADER ============== -->
|
||
<header class="grid items-end gap-8 mb-7" 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 · 02 · Neu</span>
|
||
<span class="badge muted dot">Entwurf</span>
|
||
</div>
|
||
<h1 class="text-[32px] font-bold tracking-[-0.7px] text-ink leading-[1.1] m-0">Neue Pressemitteilung</h1>
|
||
<p class="mt-2 text-[13px] text-ink-3 leading-[1.55] max-w-[640px] m-0">
|
||
Schreibfläche links, Steuerung rechts. Speichert automatisch alle paar Sekunden. Beim Klick auf
|
||
<span class="font-semibold text-hub">„Zur Prüfung senden"</span> läuft eine kurze Qualitäts-Checkliste.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-2 flex-shrink-0">
|
||
<a href="User Pressemitteilungen presseportale.html" class="btn-secondary whitespace-nowrap">
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M7.5 3L4.5 6l3 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
Zur Liste
|
||
</a>
|
||
<button class="btn-secondary whitespace-nowrap text-err" style="color:#8E2A19;border-color:#E0B0A5;">
|
||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M3 4h10M5.5 4V2.5h5V4M5 4l.5 9.5h5L11 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
Entwurf verwerfen
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============== 2-COLUMN GRID ============== -->
|
||
<div class="grid gap-7" style="grid-template-columns:minmax(0,1fr) 360px;">
|
||
|
||
<!-- ===================================================== -->
|
||
<!-- LINKS: SCHREIBFLÄCHE -->
|
||
<!-- ===================================================== -->
|
||
<div class="space-y-6 min-w-0">
|
||
|
||
<!-- ─── 1) FIRMA-SELEKTOR ─── -->
|
||
<section class="panel" style="padding:14px 18px;">
|
||
<div class="flex items-center gap-5">
|
||
<div class="field-label" style="margin-bottom:0;">Für Firma</div>
|
||
<button class="flex items-center gap-2.5 px-3 py-1.5 bg-white border border-hub rounded-[4px] hover:bg-hub-soft transition-colors" style="box-shadow:inset 0 0 0 1px #1A2540;">
|
||
<span class="w-5 h-5 rounded-[3px] bg-hub-soft border border-hub-soft-2 flex items-center justify-center text-hub text-[9.5px] font-bold">TB</span>
|
||
<span class="text-[13px] font-semibold text-hub">Tegernseer Brauerei AG</span>
|
||
<svg width="10" height="10" viewBox="0 0 12 12" fill="none" class="text-hub-3"><path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
<span class="text-[11.5px] text-ink-3">
|
||
Boilerplate und Pressekontakt werden vorbefüllt.
|
||
</span>
|
||
<span class="flex-1"></span>
|
||
<a href="#" class="btn-ghost text-[11.5px]">
|
||
<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 Firma anlegen
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── 2) TITEL ─── -->
|
||
<section class="panel" style="padding:20px 22px;">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<div class="field-label" style="margin-bottom:0;">
|
||
Titel / Headline <span class="req">*</span>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<span class="meter good">
|
||
<span class="bar"><i style="width:62%;"></i></span>
|
||
62 / 100
|
||
</span>
|
||
<span class="badge-bald">KI-Titel · bald</span>
|
||
</div>
|
||
</div>
|
||
<input class="inp title" value="Tegernseer Brauerei eröffnet Craft-Beer-Manufaktur am Tegernseer Hafen" />
|
||
<div class="field-help">
|
||
40–90 Zeichen empfohlen. Konkret, ohne Marketing-Floskeln. Wer? Was? Wo?
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── 3) SUBLINE ─── -->
|
||
<section class="panel" style="padding:20px 22px;">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<div class="field-label" style="margin-bottom:0;">
|
||
Untertitel <span class="text-ink-4 font-normal" style="letter-spacing:0;text-transform:none;">— optional</span>
|
||
</div>
|
||
<span class="meter">
|
||
<span class="bar"><i style="width:48%;"></i></span>
|
||
118 / 200
|
||
</span>
|
||
</div>
|
||
<input class="inp subtitle" value="Neue Schau-Manufaktur mit Verkostungsraum und Besucherführungen — Eröffnung 12. Juni 2026." />
|
||
</section>
|
||
|
||
<!-- ─── 4) FLIESSTEXT ─── -->
|
||
<section class="panel">
|
||
<div class="flex items-center justify-between" style="padding:13px 18px 0 18px;">
|
||
<div class="field-label" style="margin-bottom:0;">
|
||
Fließtext <span class="req">*</span>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<span class="meter good">
|
||
<span class="bar"><i style="width:38%;"></i></span>
|
||
1.420 / 3.500 Z.
|
||
</span>
|
||
<span class="badge-bald">KI-Lektorat · bald</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toolbar -->
|
||
<div class="toolbar mt-3 mx-3" style="border-radius:4px;border:1px solid #E2DDD0;">
|
||
<button class="tb-btn" title="Absatz / Stilebene">
|
||
<span class="lbl">Absatz</span>
|
||
<svg width="9" height="9" viewBox="0 0 12 12" fill="none" class="ml-1 opacity-70"><path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
<span class="tb-sep"></span>
|
||
<button class="tb-btn" title="Fett" style="font-weight:700;">B</button>
|
||
<button class="tb-btn" title="Kursiv" style="font-style:italic;">I</button>
|
||
<span class="tb-sep"></span>
|
||
<button class="tb-btn" title="Zwischenüberschrift">H₂</button>
|
||
<button class="tb-btn" title="Aufzählung">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><circle cx="3" cy="4" r="1" fill="currentColor"/><circle cx="3" cy="8" r="1" fill="currentColor"/><circle cx="3" cy="12" r="1" fill="currentColor"/><path d="M6 4h8M6 8h8M6 12h6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
|
||
</button>
|
||
<button class="tb-btn" title="Nummerierte Liste">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M6 4h8M6 8h8M6 12h8" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><text x="1.5" y="6" font-size="4.5" font-family="JetBrains Mono" fill="currentColor">1</text><text x="1.5" y="10" font-size="4.5" font-family="JetBrains Mono" fill="currentColor">2</text><text x="1.5" y="14" font-size="4.5" font-family="JetBrains Mono" fill="currentColor">3</text></svg>
|
||
</button>
|
||
<button class="tb-btn" title="Zitat">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M3 5.5C3 4.7 3.7 4 4.5 4H6v3.5H4.5C3.7 7.5 3 8.2 3 9V11" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/><path d="M9 5.5C9 4.7 9.7 4 10.5 4H12v3.5h-1.5C9.7 7.5 9 8.2 9 9V11" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
<span class="tb-sep"></span>
|
||
<button class="tb-btn" title="Link">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M6 10l4-4M5 6.5L4 7.5a2.5 2.5 0 003.5 3.5l1-1M11 9.5l1-1a2.5 2.5 0 00-3.5-3.5l-1 1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
<span class="tb-sep"></span>
|
||
<button class="tb-btn" title="Rückgängig">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M5 5L2.5 7.5 5 10M2.5 7.5h7.5a3 3 0 010 6H8" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
<button class="tb-btn" title="Wiederholen">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M11 5l2.5 2.5L11 10M13.5 7.5H6a3 3 0 000 6h2" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
|
||
<span class="flex-1"></span>
|
||
|
||
<span class="text-[10.5px] text-ink-4 mr-2">Reduzierter Editor — bewusst eingeschränkt für konsistentes Format.</span>
|
||
</div>
|
||
|
||
<!-- Editor body -->
|
||
<div class="editor-body mx-3 mb-3" style="border:1px solid #E2DDD0;border-top:0;border-radius:0 0 4px 4px;background:#fff;">
|
||
<p class="lede">
|
||
<strong>Tegernsee, 11.05.2026.</strong> Die Tegernseer Brauerei AG eröffnet am 12. Juni 2026 ihre neue
|
||
Craft-Beer-Manufaktur direkt am Tegernseer Hafen. Auf rund 1.200 m² entsteht eine
|
||
Schau-Brauerei mit angeschlossenem Verkostungsraum und ganzjährigen Besucherführungen.
|
||
</p>
|
||
|
||
<p>
|
||
Der Neubau ergänzt den 1675 gegründeten Stammsitz und setzt einen Fokus auf
|
||
experimentelle Sude in kleinen Chargen. „Wir wollen Bier-Handwerk wieder
|
||
<mark class="suggest">erlebbar machen</mark> — direkt am Wasser, mit offenen Kesseln und
|
||
unseren Brauern als Gastgebern", erklärt Vorstandsvorsitzender Dr. Markus Weishaupt.
|
||
</p>
|
||
|
||
<h2>Verkostung, Manufaktur-Touren, regionale Wertschöpfung</h2>
|
||
<p>
|
||
Die Manufaktur kombiniert drei Erlebnisformate unter einem Dach:
|
||
</p>
|
||
|
||
<ul>
|
||
<li>Schau-Brauerei mit gläsernem Sudhaus und 30-minütigen Kurzführungen.</li>
|
||
<li>Verkostungsraum für bis zu 60 Personen, mit wechselnden Sorten aus der Pilot-Anlage.</li>
|
||
<li>Direktverkauf ab Werk — ausschließlich aus Tegernseer Roh<editor-cursor></editor-cursor></li>
|
||
</ul>
|
||
|
||
<p style="color:#8A918D;font-style:italic;">
|
||
Hier weiterschreiben …
|
||
</p>
|
||
</div>
|
||
|
||
<!-- AI Hint -->
|
||
<div class="mx-3 mb-4">
|
||
<div class="ai-hint">
|
||
<span class="ai-ico">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M8 2l1.5 4 4 1.5L9.5 9 8 13l-1.5-4L2.5 7.5 6.5 6z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>
|
||
</span>
|
||
<span><strong class="font-semibold">KI-Lektorat</strong> liest Korrektur, schlägt Kürzungen vor und prüft auf werbliche Sprache. Erscheint hier inline — bald verfügbar.</span>
|
||
<span class="ai-cta">bald</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── 5) MEDIEN ─── -->
|
||
<section class="panel" style="padding:18px 20px 20px;">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div class="field-label" style="margin-bottom:0;">
|
||
Medien / Bilder
|
||
<span class="text-ink-4 font-normal" style="letter-spacing:0;text-transform:none;">— mindestens 1 Bild empfohlen</span>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-[11.5px] text-ink-3"><strong class="text-ink-2 font-semibold">2</strong> Bilder hochgeladen · 1 Vorschau</span>
|
||
<span class="badge-bald">KI-Bildgenerierung · bald</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-3 gap-3 mb-3">
|
||
|
||
<!-- Bild 1 -->
|
||
<div class="media-tile">
|
||
<div class="media-thumb" style="background:linear-gradient(135deg,#8A6A3A 0%,#3A4D2F 50%,#1A2540 100%);">
|
||
<span class="media-cover-flag badge ok dot" style="font-size:9px;padding:2px 7px;letter-spacing:.10em;">Titelbild</span>
|
||
<span class="media-actions">
|
||
<button class="media-act" title="Bearbeiten"><svg width="11" height="11" viewBox="0 0 16 16" fill="none"><path d="M11 3l2 2-8 8H3v-2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg></button>
|
||
<button class="media-act" title="Entfernen"><svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button>
|
||
</span>
|
||
<!-- Visual mock -->
|
||
<svg viewBox="0 0 200 125" class="absolute inset-0 w-full h-full" preserveAspectRatio="xMidYMid slice">
|
||
<defs>
|
||
<linearGradient id="bsky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3E5B7A"/><stop offset="1" stop-color="#8A9DAE"/></linearGradient>
|
||
</defs>
|
||
<rect width="200" height="80" fill="url(#bsky)"/>
|
||
<rect y="80" width="200" height="45" fill="#2E3B25"/>
|
||
<polygon points="0,80 40,60 70,72 110,55 150,68 200,50 200,80" fill="#3F2D1E" opacity="0.85"/>
|
||
<rect x="60" y="70" width="80" height="22" fill="#C8A86E" opacity="0.95"/>
|
||
<rect x="62" y="72" width="76" height="3" fill="#8A5E27"/>
|
||
<rect x="70" y="76" width="6" height="12" fill="#1A1F1C" opacity="0.7"/>
|
||
<rect x="80" y="76" width="6" height="12" fill="#1A1F1C" opacity="0.7"/>
|
||
<rect x="90" y="76" width="6" height="12" fill="#1A1F1C" opacity="0.7"/>
|
||
<rect x="100" y="76" width="6" height="12" fill="#1A1F1C" opacity="0.7"/>
|
||
<rect x="110" y="76" width="6" height="12" fill="#1A1F1C" opacity="0.7"/>
|
||
<rect x="120" y="76" width="6" height="12" fill="#1A1F1C" opacity="0.7"/>
|
||
<rect x="130" y="76" width="6" height="12" fill="#1A1F1C" opacity="0.7"/>
|
||
</svg>
|
||
</div>
|
||
<div class="media-meta">
|
||
<div class="media-cap">Außenansicht der neuen Manufaktur am Tegernseer Hafen.</div>
|
||
<div class="media-alt">Alt: Holzgebäude mit Glasfront direkt am See, Abendlicht.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bild 2 -->
|
||
<div class="media-tile">
|
||
<div class="media-thumb" style="background:#4A2F1E;">
|
||
<span class="media-actions">
|
||
<button class="media-act" title="Als Titelbild"><svg width="11" height="11" viewBox="0 0 16 16" fill="none"><path d="M8 2l1.5 3.5L13 6l-2.5 2.5L11 12l-3-1.7L5 12l.5-3.5L3 6l3.5-.5z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg></button>
|
||
<button class="media-act" title="Bearbeiten"><svg width="11" height="11" viewBox="0 0 16 16" fill="none"><path d="M11 3l2 2-8 8H3v-2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg></button>
|
||
<button class="media-act" title="Entfernen"><svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button>
|
||
</span>
|
||
<svg viewBox="0 0 200 125" class="absolute inset-0 w-full h-full" preserveAspectRatio="xMidYMid slice">
|
||
<rect width="200" height="125" fill="#3A2516"/>
|
||
<ellipse cx="100" cy="50" rx="80" ry="30" fill="#C8A86E" opacity="0.18"/>
|
||
<rect x="40" y="30" width="34" height="80" rx="3" fill="#B8843A"/>
|
||
<rect x="42" y="32" width="30" height="6" fill="#8A5E27"/>
|
||
<rect x="42" y="92" width="30" height="14" fill="#8A5E27"/>
|
||
<rect x="48" y="46" width="18" height="32" fill="#EFEADC"/>
|
||
<rect x="83" y="20" width="34" height="90" rx="3" fill="#D4A04A"/>
|
||
<rect x="85" y="22" width="30" height="6" fill="#A87A1F"/>
|
||
<rect x="85" y="92" width="30" height="14" fill="#A87A1F"/>
|
||
<rect x="91" y="42" width="18" height="32" fill="#FBFAF6"/>
|
||
<rect x="126" y="38" width="34" height="72" rx="3" fill="#A87A4A"/>
|
||
<rect x="128" y="40" width="30" height="6" fill="#5A3D1E"/>
|
||
<rect x="128" y="92" width="30" height="14" fill="#5A3D1E"/>
|
||
<rect x="134" y="54" width="18" height="32" fill="#F1E6D3"/>
|
||
</svg>
|
||
</div>
|
||
<div class="media-meta">
|
||
<div class="media-cap">Drei neue Sorten aus der Pilot-Anlage — Spezialeditionen.</div>
|
||
<div class="media-alt">Alt: Drei Bierflaschen mit unterschiedlichen Etiketten auf Holztisch.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dropzone -->
|
||
<button class="dropzone" style="flex-direction:column;justify-content:center;text-align:center;min-height:100%;">
|
||
<span class="dz-ico" style="width:38px;height:38px;">
|
||
<svg width="18" height="18" viewBox="0 0 16 16" fill="none"><path d="M8 11V4M5 7L8 4l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><rect x="2.5" y="11.5" width="11" height="2" rx="1" stroke="currentColor" stroke-width="1.4"/></svg>
|
||
</span>
|
||
<div>
|
||
<div class="text-[12.5px] font-semibold text-hub leading-tight">Bilder hinzufügen</div>
|
||
<div class="text-[10.5px] text-ink-3 mt-1 leading-tight">JPG, PNG · max. 8 MB · min. 1.200 × 800 px</div>
|
||
</div>
|
||
</button>
|
||
|
||
</div>
|
||
|
||
<div class="field-help">
|
||
Bildunterschrift und <strong class="text-ink-2 font-semibold">Alt-Text</strong> sind pro Bild Pflicht für die Veröffentlichung. Das Titelbild erscheint in der Liste auf presseecho & businessportal24.
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── 6) ANHÄNGE ─── -->
|
||
<section class="panel" style="padding:18px 20px 18px;">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div class="field-label" style="margin-bottom:0;">
|
||
Anhänge / Downloads
|
||
<span class="text-ink-4 font-normal" style="letter-spacing:0;text-transform:none;">— optional</span>
|
||
</div>
|
||
<button class="btn-ghost text-[11.5px]">
|
||
<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>
|
||
Datei hinzufügen
|
||
</button>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<div class="flex items-center gap-3 p-3 border border-bg-rule rounded-[4px] bg-bg-elev">
|
||
<span class="w-9 h-11 rounded-[3px] bg-white border border-bg-rule flex items-center justify-center text-[9px] font-bold text-err font-mono">PDF</span>
|
||
<div class="min-w-0 flex-1">
|
||
<div class="text-[12.5px] font-semibold text-ink truncate">Pressemappe_Manufaktur.pdf</div>
|
||
<div class="text-[10.5px] text-ink-3 font-mono mt-0.5">2,4 MB · 12 Seiten</div>
|
||
</div>
|
||
<button class="menu-trigger w-7 h-7 rounded-[3px] hover:bg-bg-rule-2"><svg width="13" height="13" viewBox="0 0 12 12" fill="none"><path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg></button>
|
||
</div>
|
||
<button class="dropzone" style="padding:14px;">
|
||
<span class="dz-ico" style="width:32px;height:32px;">
|
||
<svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M6 2.5h4l3 3v8H3v-8z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M10 2.5V5.5h3M8 8v4M6 10l2 2 2-2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</span>
|
||
<div>
|
||
<div class="text-[12.5px] font-semibold text-hub leading-tight">PDF oder Dokument ziehen</div>
|
||
<div class="text-[10.5px] text-ink-3 mt-1">max. 25 MB pro Datei</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── 7) BOILERPLATE ─── -->
|
||
<section class="panel" style="padding:18px 20px 18px;">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div class="field-label" style="margin-bottom:0;">
|
||
Über das Unternehmen
|
||
<span class="text-ink-4 font-normal" style="letter-spacing:0;text-transform:none;">— Boilerplate aus Firma</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="badge muted dot" style="font-size:9.5px;">aus Firmenprofil</span>
|
||
<button class="btn-ghost text-[11.5px]">
|
||
<svg width="11" height="11" viewBox="0 0 16 16" fill="none"><path d="M11 3l2 2-8 8H3v-2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
||
Für diese PM überschreiben
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="boiler font-serif text-[13.5px] text-ink-2 leading-[1.6]">
|
||
<p class="m-0 mb-2">
|
||
<strong class="text-ink font-semibold">Über die Tegernseer Brauerei AG.</strong>
|
||
Die Tegernseer Brauerei wurde 1675 als Klosterbrauerei der Benediktinerabtei Tegernsee gegründet und
|
||
ist heute eine der ältesten kontinuierlich brauenden Brauereien Bayerns. Im Familienbesitz der Herzöge
|
||
von Bayern werden jährlich rund 280.000 Hektoliter gebraut. Schwerpunkt: helle Lagerbiere und
|
||
Spezialitäten nach dem bayerischen Reinheitsgebot.
|
||
</p>
|
||
<p class="m-0 text-[12px] text-ink-3 mt-3">
|
||
<span class="font-semibold text-ink-2">Sitz:</span> Tegernsee · <span class="font-semibold text-ink-2">Mitarbeiter:</span> 142 · <span class="font-semibold text-ink-2">Web:</span> tegernseer-brauerei.de
|
||
</p>
|
||
</div>
|
||
|
||
<div class="field-help">
|
||
Wird automatisch unter jeder Pressemitteilung dieser Firma angefügt. Pro PM editierbar — Änderungen wirken sich nicht auf andere Mitteilungen aus.
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
<!-- /Schreibfläche -->
|
||
|
||
<!-- ===================================================== -->
|
||
<!-- RECHTS: SETTINGS-SIDEBAR -->
|
||
<!-- ===================================================== -->
|
||
<aside class="space-y-4 sticky-aside" style="align-self:start;">
|
||
|
||
<!-- ─── Status & Aktion (PRIMÄR) ─── -->
|
||
<div class="meta-card" style="padding:16px 18px;border-color:#1A2540;background:linear-gradient(180deg,#FBFAF6 0%,#fff 60%);">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<span class="meta-title"><span class="num">01</span>Status & Absenden</span>
|
||
<span class="badge muted dot">Entwurf</span>
|
||
</div>
|
||
|
||
<!-- Checkliste -->
|
||
<div class="bg-bg-elev border border-bg-rule rounded-[4px] p-3 mb-3">
|
||
<div class="flex items-center justify-between mb-1">
|
||
<span class="eyebrow muted" style="font-size:9.5px;letter-spacing:.16em;">Pre-Submit-Check</span>
|
||
<span class="text-[10.5px] font-mono text-ok font-semibold">4 / 6 ok</span>
|
||
</div>
|
||
<div class="check-row ok">
|
||
<span class="ic"><svg width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M2.5 6l2.5 2.5L9.5 3.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
||
<span class="lbl">Titel vorhanden <span class="sub">62 Zeichen — gute Länge</span></span>
|
||
</div>
|
||
<div class="check-row ok">
|
||
<span class="ic"><svg width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M2.5 6l2.5 2.5L9.5 3.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
||
<span class="lbl">Mindestlänge Fließtext erreicht <span class="sub">1.420 / min. 600 Zeichen</span></span>
|
||
</div>
|
||
<div class="check-row ok">
|
||
<span class="ic"><svg width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M2.5 6l2.5 2.5L9.5 3.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
||
<span class="lbl">Firma zugeordnet <span class="sub">Tegernseer Brauerei AG</span></span>
|
||
</div>
|
||
<div class="check-row ok">
|
||
<span class="ic"><svg width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M2.5 6l2.5 2.5L9.5 3.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
||
<span class="lbl">Mindestens 1 Bild <span class="sub">2 Bilder · Titelbild gesetzt</span></span>
|
||
</div>
|
||
<div class="check-row warn">
|
||
<span class="ic"><svg width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M6 3.5v3M6 8.5h0" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></span>
|
||
<span class="lbl">Themen-Tags fehlen <span class="sub">empfohlen für SEO & Auffindbarkeit</span></span>
|
||
</div>
|
||
<div class="check-row warn">
|
||
<span class="ic"><svg width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M6 3.5v3M6 8.5h0" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></span>
|
||
<span class="lbl">Untertitel optional gesetzt — kein Pressekontakt-Telefon <span class="sub">Journalisten können dich nicht erreichen</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Primärer Submit -->
|
||
<button class="btn-primary full">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M2 8l5 5 7-10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
Zur Prüfung senden
|
||
</button>
|
||
<p class="text-[11px] text-ink-3 mt-2 leading-[1.45] m-0">
|
||
Warnungen (<span class="text-warn font-semibold">⚠</span>) blockieren nicht. Pflichtfelder (<span class="text-err font-semibold">✗</span>) blockieren. Die Redaktion prüft typ. innerhalb von 24 h.
|
||
</p>
|
||
|
||
<hr class="rule my-3" />
|
||
<div class="flex items-center gap-2">
|
||
<button class="btn-secondary" style="flex:1;">
|
||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M2 8l4 4 8-8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
Speichern
|
||
</button>
|
||
<button class="btn-secondary" style="flex:1;">
|
||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.3"/><path d="M5 8.5L7 10.5 11 6.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
Vorschau
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ─── Portal-Auswahl ─── -->
|
||
<div class="meta-card">
|
||
<div class="meta-head">
|
||
<span class="meta-title"><span class="num">02</span>Portal</span>
|
||
<span class="text-[10.5px] text-ink-3"><strong class="font-mono text-ink-2">1</strong> ausgewählt</span>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label class="portal-opt is-checked">
|
||
<span class="pcheck"></span>
|
||
<span>
|
||
<span class="ptitle"><span class="dot-pe"></span>presseecho</span>
|
||
<span class="psub">Allgemeine Pressewelt · breite Reichweite, redaktionelle Prüfung 24 h</span>
|
||
</span>
|
||
</label>
|
||
<label class="portal-opt">
|
||
<span class="pcheck"></span>
|
||
<span>
|
||
<span class="ptitle"><span class="dot-bp"></span>businessportal24</span>
|
||
<span class="psub">B2B & Mittelstand · höhere Sichtbarkeit auf Business-Themen</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
|
||
<p class="text-[11px] text-ink-4 mt-3 mb-0 leading-[1.45] flex items-start gap-1.5">
|
||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" class="mt-0.5 flex-shrink-0 text-ink-3"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.2"/><path d="M6 5v3M6 4v.4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||
<span>Im MVP ein Portal pro PM. Cross-Publishing auf beide Portale folgt in Phase 2.</span>
|
||
</p>
|
||
</div>
|
||
|
||
<!-- ─── Pressekontakt ─── -->
|
||
<div class="meta-card">
|
||
<div class="meta-head">
|
||
<span class="meta-title"><span class="num">03</span>Pressekontakt</span>
|
||
<span class="flex items-center gap-0.5 bg-bg-elev border border-bg-rule rounded-[3px] p-0.5">
|
||
<span class="tab-mini is-active">Aus Firma</span>
|
||
<span class="tab-mini">Eigener</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<div>
|
||
<label class="block text-[10.5px] font-semibold text-ink-3 uppercase tracking-[.10em] mb-1">Name</label>
|
||
<input class="inp small" value="Maria Schwarz" />
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-2">
|
||
<div>
|
||
<label class="block text-[10.5px] font-semibold text-ink-3 uppercase tracking-[.10em] mb-1">Funktion</label>
|
||
<input class="inp small" value="Leitung Kommunikation" />
|
||
</div>
|
||
<div>
|
||
<label class="block text-[10.5px] font-semibold text-ink-3 uppercase tracking-[.10em] mb-1">Telefon</label>
|
||
<input class="inp small" placeholder="+49 …" style="border-color:#E1C883;background:#FBF6EB;" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-[10.5px] font-semibold text-ink-3 uppercase tracking-[.10em] mb-1">E-Mail</label>
|
||
<input class="inp small" value="presse@tegernseer-brauerei.de" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-2 mt-3 text-[11px] text-warn">
|
||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M6 1L11 11H1z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/><path d="M6 5v2.5M6 9v.2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||
Telefon empfohlen — Journalisten greifen oft direkt zum Hörer.
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ─── Themen-Tags ─── -->
|
||
<div class="meta-card">
|
||
<div class="meta-head">
|
||
<span class="meta-title"><span class="num">04</span>Themen-Tags</span>
|
||
<span class="text-[10.5px] text-ink-4"><strong class="font-mono text-ink-2">0</strong> / 5</span>
|
||
</div>
|
||
|
||
<div class="border border-bg-rule rounded-[4px] bg-white px-2 py-2 min-h-[58px] flex flex-wrap items-center gap-1.5">
|
||
<span class="text-[11.5px] text-ink-4 italic px-1.5">Tippen, um Tag hinzuzufügen …</span>
|
||
</div>
|
||
|
||
<div class="mt-2.5">
|
||
<div class="eyebrow muted mb-1.5" style="font-size:9.5px;">Vorschläge aus Firmenprofil</div>
|
||
<div class="flex flex-wrap gap-1.5">
|
||
<button class="filter-tag">+ Mittelstand</button>
|
||
<button class="filter-tag">+ Brauerei</button>
|
||
<button class="filter-tag">+ Tegernsee</button>
|
||
<button class="filter-tag">+ Tourismus</button>
|
||
<button class="filter-tag">+ Eröffnung</button>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
.filter-tag{padding:3px 9px;background:#FBFAF6;border:1px dashed #CFD6E4;border-radius:3px;font-size:11.5px;color:#3A413D;font-weight:500;transition:border-color .12s,background .12s,color .12s;}
|
||
.filter-tag:hover{border-style:solid;border-color:#1A2540;background:#E5E9F1;color:#1A2540;}
|
||
</style>
|
||
|
||
<p class="text-[10.5px] text-ink-4 mt-2.5 mb-0 leading-[1.45]">
|
||
Kategorie auf presseecho wird automatisch aus dem ersten Tag abgeleitet.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- ─── Veröffentlichung ─── -->
|
||
<div class="meta-card">
|
||
<div class="meta-head">
|
||
<span class="meta-title"><span class="num">05</span>Veröffentlichung</span>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label class="flex items-start gap-2.5 p-2 border border-hub rounded-[4px] bg-hub-soft cursor-pointer" style="box-shadow:inset 0 0 0 1px #1A2540;">
|
||
<span class="w-3 h-3 rounded-full bg-hub flex-shrink-0 mt-0.5 flex items-center justify-center"><span class="w-1.5 h-1.5 rounded-full bg-white"></span></span>
|
||
<span>
|
||
<span class="text-[12.5px] font-semibold text-hub block leading-tight">Sofort nach Freigabe</span>
|
||
<span class="text-[11px] text-ink-3 block mt-0.5 leading-tight">geht live, sobald die Redaktion grünes Licht gibt</span>
|
||
</span>
|
||
</label>
|
||
<label class="flex items-start gap-2.5 p-2 border border-bg-rule rounded-[4px] bg-bg-elev cursor-not-allowed" style="opacity:.75;">
|
||
<span class="w-3 h-3 rounded-full border-2 border-ink-4 flex-shrink-0 mt-0.5"></span>
|
||
<span class="flex-1">
|
||
<span class="text-[12.5px] font-semibold text-ink-2 block leading-tight flex items-center gap-2">Geplanter Termin <span class="badge-bald">bald</span></span>
|
||
<span class="text-[11px] text-ink-3 block mt-0.5 leading-tight">Datum + Uhrzeit, automatische Veröffentlichung</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
|
||
<hr class="rule my-3" />
|
||
<label class="flex items-center gap-2 text-[12px] text-ink-2 cursor-pointer">
|
||
<input type="checkbox" class="rounded border-bg-rule" style="accent-color:#1A2540;" />
|
||
<span>Sperrfrist setzen (Embargo) — frühestens 12. Juni 2026, 06:00 Uhr</span>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- ─── SEO (collapsed) ─── -->
|
||
<div class="meta-card">
|
||
<div class="collapse-head">
|
||
<span class="meta-title"><span class="num">06</span>SEO</span>
|
||
<span class="flex items-center gap-2">
|
||
<span class="text-[10.5px] text-ink-4">automatisch aus Titel</span>
|
||
<svg class="chev" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ─── Phase 2 Footer ─── -->
|
||
<div class="bg-accent-soft border border-[#E1C883] rounded-[5px] p-3.5">
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" class="text-accent-deep"><path d="M8 2l1.5 4 4 1.5L9.5 9 8 13l-1.5-4L2.5 7.5 6.5 6z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
||
<span class="eyebrow accent">Phase 2 — bald</span>
|
||
</div>
|
||
<ul class="text-[11.5px] text-accent-deep leading-[1.55] list-none p-0 m-0 space-y-1">
|
||
<li>· KI-Titel-Optimierung & -Lektorat live</li>
|
||
<li>· Geplante Veröffentlichung / Scheduling</li>
|
||
<li>· Versionshistorie & Kommentare</li>
|
||
<li>· Portal-Vorschau (presseecho vs. BP24)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</aside>
|
||
|
||
</div>
|
||
|
||
<!-- ============== FUSSZEILE ============== -->
|
||
<footer class="flex items-center justify-between pt-6 pb-2 mt-8 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">Hilfe zum Editor</a>
|
||
<a href="/cdn-cgi/l/email-protection#43303633332c313703333126303026332c3137222f266d202c2e" 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>
|