michael/monthly-report-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upload

Browse Source
This commit is contained in:
rabenNest7$
2026-06-24 14:40:43 +00:00
parent 22b05a7a1b
commit 7058970f98
80 changed files with 6383 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
output/theme-catalog/soft-lavender.html
+436
View File
@@ -0,0 +1,436 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Monatsreport Mai 2026 - Ferienapartments Kuestenblick</title>
<style>
:root {
--primary: #67558B;
--secondary: #8B76B3;
--accent: #D5A6B8;
--text: #302B38;
--muted: #7D7485;
--surface: #F5F0F8;
--line: #dfe5e8;
--positive: #207a5a;
--neutral: #667680;
--negative: #b14949;
--watch: #9a6815;
}
@page {
size: A4;
margin: 13mm 14mm 18mm 14mm;
}
* { box-sizing: border-box; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body {
margin: 0;
color: var(--text);
font-family: Arial, Arial, sans-serif;
font-size: 9.3pt;
line-height: 1.48;
background: #fff;
}
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 27pt; line-height: 1.08; letter-spacing: -0.6px; margin-bottom: 2mm; }
h2 { font-size: 14.5pt; line-height: 1.2; margin-bottom: 4mm; }
h3 { font-size: 10.8pt; line-height: 1.25; margin-bottom: 1.5mm; }
p { margin-bottom: 3mm; }
.cover {
position: relative;
overflow: hidden;
min-height: 67mm;
padding: 9mm;
border-radius: 5mm;
color: #fff;
background: linear-gradient(128deg, var(--primary), var(--secondary));
margin-bottom: 7mm;
break-inside: avoid;
}
.cover::after {
content: "";
position: absolute;
width: 92mm;
height: 92mm;
right: -27mm;
top: -42mm;
border: 12mm solid rgba(255,255,255,.08);
border-radius: 50%;
}
.cover-top { display: flex; align-items: center; justify-content: space-between; gap: 8mm; position: relative; z-index: 1; }
.brand { display: flex; align-items: center; gap: 4mm; }
.logo {
width: 15mm; height: 15mm; border-radius: 4mm;
background: rgba(255,255,255,.96); color: var(--primary);
display: flex; align-items: center; justify-content: center; font-size: 15pt; font-weight: 800;
box-shadow: 0 2mm 5mm rgba(0,0,0,.12);
overflow: hidden;
}
.logo img { width: 100%; height: 100%; object-fit: contain; padding: 1.6mm; }
.brand-name { font-size: 11pt; font-weight: 700; }
.brand-sub { font-size: 8pt; opacity: .82; }
.period-chip {
padding: 2.2mm 4mm; border-radius: 99mm;
border: .25mm solid rgba(255,255,255,.38);
background: rgba(255,255,255,.12); font-size: 8.3pt; font-weight: 700;
}
.cover-main { position: relative; z-index: 1; margin-top: 13mm; max-width: 142mm; }
.eyebrow { text-transform: uppercase; letter-spacing: 1.7px; font-size: 7.2pt; font-weight: 800; opacity: .78; margin-bottom: 2.2mm; }
.cover-meta { display: flex; flex-wrap: wrap; gap: 3mm 8mm; font-size: 8.4pt; opacity: .88; }
.section { margin-bottom: 7mm; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 5mm; margin-bottom: 3.5mm; }
.section-heading h2 { margin: 0; }
.section-kicker { font-size: 7.3pt; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 1mm; }
.summary {
display: grid; grid-template-columns: 10mm 1fr; gap: 4mm;
padding: 5mm; border-radius: 3mm; background: var(--surface);
border-left: 1.5mm solid var(--accent); break-inside: avoid;
}
.summary-icon {
width: 9mm; height: 9mm; border-radius: 50%;
display: flex; align-items: center; justify-content: center; align-self: start; color: #fff; font-weight: 900; margin-top: .5mm;
}
.summary-icon.positive { background: var(--positive); }
.summary-icon.neutral { background: var(--neutral); }
.summary-icon.watch { background: var(--watch); }
.summary h2 { font-size: 14pt; margin-bottom: 2mm; }
.summary p { margin-bottom: 0; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; }
.kpi-card {
min-height: 31mm; padding: 4mm; border: .25mm solid var(--line);
border-radius: 3mm; break-inside: avoid; background: #fff;
}
.kpi-label { font-size: 7.3pt; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-weight: 800; }
.kpi-value { font-size: 16pt; font-weight: 800; color: var(--primary); line-height: 1.15; margin: 3mm 0 1.5mm; white-space: nowrap; }
.kpi-delta { font-size: 7.6pt; color: var(--muted); }
.delta-positive { color: var(--positive); font-weight: 700; }
.delta-negative { color: var(--negative); font-weight: 700; }
.detail-strip {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
border: .25mm solid var(--line); border-radius: 3mm; overflow: hidden; margin-top: 3mm;
}
.detail-item { padding: 3mm 4mm; border-right: .25mm solid var(--line); }
.detail-item:last-child { border-right: 0; }
.detail-label { font-size: 7.2pt; color: var(--muted); }
.detail-value { font-weight: 800; margin-top: .8mm; }
.trend-panel {
border: .25mm solid var(--line); border-radius: 3mm; padding: 5mm;
break-inside: avoid;
}
.trend-legend { display: flex; gap: 5mm; font-size: 7.4pt; color: var(--muted); }
.legend-dot { width: 2.2mm; height: 2.2mm; border-radius: 50%; display: inline-block; margin-right: 1.2mm; }
.legend-revenue { background: var(--primary); }
.legend-occ { background: var(--accent); }
.trend-grid { display: block; margin-top: 3mm; }
.trend-row { display: grid; grid-template-columns: 20mm 1fr 25mm 25mm; align-items: center; gap: 2mm; margin-top: 2mm; }
.trend-label { font-weight: 700; font-size: 8pt; }
.bar-track { height: 4mm; border-radius: 99mm; background: #edf1f3; overflow: hidden; position: relative; }
.bar { height: 100%; border-radius: inherit; }
.bar-revenue { background: var(--primary); }
.bar-occ { background: var(--accent); height: 1.5mm; position: absolute; left: 0; bottom: 0; }
.trend-number { text-align: right; font-size: 7.7pt; font-variant-numeric: tabular-nums; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; align-items: start; }
.development-list { display: grid; gap: 3mm; }
.development {
border: .25mm solid var(--line); border-radius: 3mm; padding: 4mm;
break-inside: avoid;
}
.development-top { display: flex; align-items: center; gap: 2mm; margin-bottom: 1.5mm; }
.impact-dot { width: 2.5mm; height: 2.5mm; border-radius: 50%; flex: 0 0 auto; }
.impact-dot.positive { background: var(--positive); }
.impact-dot.neutral { background: var(--neutral); }
.impact-dot.negative { background: var(--negative); }
.development p { margin: 0; color: #35434a; }
.recommendations { display: grid; gap: 3.5mm; }
.recommendation {
display: grid; grid-template-columns: 11mm 1fr; gap: 4mm;
padding: 4.5mm; border-radius: 3mm; background: var(--surface);
border: .25mm solid #d7e1e2;
break-inside: avoid;
}
.priority {
width: 10mm; height: 10mm; border-radius: 3mm; background: var(--primary); color: #fff;
display: flex; align-items: center; justify-content: center; align-self: start; font-weight: 900; font-size: 12pt;
}
.category { color: var(--primary); font-size: 7.2pt; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; }
.recommendation h3 { font-size: 11.3pt; margin: .8mm 0 2mm; }
.recommendation p { margin-bottom: 2mm; }
.recommendation p:last-child { margin-bottom: 0; }
.action-line { padding-top: 2mm; border-top: .25mm solid rgba(0,0,0,.08); }
.outlook {
padding: 5mm; color: #fff; border-radius: 3mm;
background: linear-gradient(115deg, var(--primary), var(--secondary));
break-inside: avoid;
}
.outlook h2 { margin-bottom: 2mm; }
.outlook p { margin: 0; opacity: .94; }
.notes {
margin-top: 4mm; padding: 3.5mm 4mm; border-radius: 2mm;
background: #f7f8f9; color: var(--muted); font-size: 7.5pt;
break-inside: avoid;
}
.notes ul { margin: 1.5mm 0 0; padding-left: 4mm; }
.notes li { margin-bottom: .8mm; }
.legal { margin-top: 4mm; color: var(--muted); font-size: 6.9pt; }
.page-break { break-before: page; }
.avoid { break-inside: avoid; }
@media print {
.section:last-child { margin-bottom: 0; }
}
</style>
</head>
<body>
<main>
<section class="cover">
<div class="cover-top">
<div class="brand">
<div class="logo">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNjAgMTYwJz48cmVjdCB3aWR0aD0nMTYwJyBoZWlnaHQ9JzE2MCcgcng9JzM1JyBmaWxsPScjZmZmZmZmJy8+PHBhdGggZD0nTTI4IDEwNWMyOC0xMCA1NC0xMCAxMDQgMCcgc3Ryb2tlPScjMWY1ZDY2JyBzdHJva2Utd2lkdGg9JzknIGZpbGw9J25vbmUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjxjaXJjbGUgY3g9JzgwJyBjeT0nNjInIHI9JzI4JyBmaWxsPScjZGJhMjVkJy8+PHBhdGggZD0nTTQ4IDYyaDY0JyBzdHJva2U9JyMxZjVkNjYnIHN0cm9rZS13aWR0aD0nOCcgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJy8+PC9zdmc+" alt="Logo">
</div>
<div>
<div class="brand-name">Ferienapartments Kuestenblick</div>
<div class="brand-sub">Apartment Seestern</div>
</div>
</div>
<div class="period-chip">Mai 2026</div>
</div>
<div class="cover-main">
<div class="eyebrow">Performance & Handlungsempfehlungen</div>
<h1>Monatsreport</h1>
<div class="cover-meta">
<span>Nordseekueste</span>
<span>Erstellt am 24.06.2026</span>
<span>Version 1.0</span>
</div>
</div>
</section>
<section class="section">
<div class="summary">
<div class="summary-icon positive">
↑ </div>
<div>
<div class="section-kicker">Kurzfazit</div>
<h2>Starker Umsatzmonat bei weiterhin gesunder Auslastung</h2>
<p>Der Mai verbindet eine hohe Auslastung mit einem gestiegenen durchschnittlichen Tagespreis. Dadurch liegt der Umsatz klar ueber dem Vormonat, ohne dass die Buchungszahl im gleichen Umfang wachsen musste. Die Stornoquote bleibt beherrschbar. Fuer die kommenden Wochen sollte der Fokus deshalb auf einer feineren Preissteuerung an besonders nachgefragten Tagen liegen.</p>
</div>
</div>
</section>
<section class="section">
<div class="section-heading">
<div>
<div class="section-kicker">Kennzahlen</div>
<h2>Der Monat auf einen Blick</h2>
</div>
<div class="section-kicker">Vergleich: April 2026</div>
</div>
<div class="kpi-grid">
<article class="kpi-card">
<div class="kpi-label">Umsatz</div>
<div class="kpi-value">6.840,50 €</div>
<div class="kpi-delta delta-positive">
+12,8 %
</div>
</article>
<article class="kpi-card">
<div class="kpi-label">Auslastung</div>
<div class="kpi-value">78,4 %</div>
<div class="kpi-delta delta-positive">
+5,7 PP
</div>
</article>
<article class="kpi-card">
<div class="kpi-label">Ø Tagespreis</div>
<div class="kpi-value">126,68 €</div>
<div class="kpi-delta delta-positive">
+4,6 %
</div>
</article>
<article class="kpi-card">
<div class="kpi-label">Buchungen</div>
<div class="kpi-value">19</div>
<div class="kpi-delta delta-positive">
+2 Buchungen
</div>
</article>
</div>
<div class="detail-strip">
<div class="detail-item"><div class="detail-label">RevPAR</div><div class="detail-value">99,32 €</div></div>
<div class="detail-item"><div class="detail-label">Verkaufte Nächte</div><div class="detail-value">54</div></div>
<div class="detail-item"><div class="detail-label">Ø Aufenthaltsdauer</div><div class="detail-value">3,6 Nächte</div></div>
<div class="detail-item"><div class="detail-label">Stornoquote</div><div class="detail-value">6,2 %</div></div>
</div>
</section>
<section class="section">
<div class="section-heading">
<div>
<div class="section-kicker">Verlauf</div>
<h2>Entwicklung der letzten Monate</h2>
</div>
<div class="trend-legend">
<span><i class="legend-dot legend-revenue"></i> Umsatz</span>
<span><i class="legend-dot legend-occ"></i> Auslastung</span>
</div>
</div>
<div class="trend-panel">
<div class="trend-grid">
<div class="trend-row">
<div class="trend-label">Dez 25</div>
<div class="bar-track">
<div class="bar bar-revenue" style="width: 61.55%"></div>
<div class="bar bar-occ" style="width: 55.2%"></div>
</div>
<div class="trend-number">4.210,00 €</div>
<div class="trend-number">55,2 %</div>
</div>
<div class="trend-row">
<div class="trend-label">Jan 26</div>
<div class="bar-track">
<div class="bar bar-revenue" style="width: 56.87%"></div>
<div class="bar bar-occ" style="width: 51.4%"></div>
</div>
<div class="trend-number">3.890,00 €</div>
<div class="trend-number">51,4 %</div>
</div>
<div class="trend-row">
<div class="trend-label">Feb 26</div>
<div class="bar-track">
<div class="bar bar-revenue" style="width: 65.42%"></div>
<div class="bar bar-occ" style="width: 59.7%"></div>
</div>
<div class="trend-number">4.475,00 €</div>
<div class="trend-number">59,7 %</div>
</div>
<div class="trend-row">
<div class="trend-label">Mär 26</div>
<div class="bar-track">
<div class="bar bar-revenue" style="width: 78.36%"></div>
<div class="bar bar-occ" style="width: 66.1%"></div>
</div>
<div class="trend-number">5.360,00 €</div>
<div class="trend-number">66,1 %</div>
</div>
<div class="trend-row">
<div class="trend-label">Apr 26</div>
<div class="bar-track">
<div class="bar bar-revenue" style="width: 88.65%"></div>
<div class="bar bar-occ" style="width: 72.7%"></div>
</div>
<div class="trend-number">6.064,00 €</div>
<div class="trend-number">72,7 %</div>
</div>
<div class="trend-row">
<div class="trend-label">Mai 26</div>
<div class="bar-track">
<div class="bar bar-revenue" style="width: 100%"></div>
<div class="bar bar-occ" style="width: 78.4%"></div>
</div>
<div class="trend-number">6.840,50 €</div>
<div class="trend-number">78,4 %</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="section-heading">
<div>
<div class="section-kicker">Analyse</div>
<h2>Wichtige Entwicklungen</h2>
</div>
</div>
<div class="two-col">
<article class="development">
<div class="development-top"><span class="impact-dot positive"></span><h3>Umsatz gewinnt ueberproportional</h3></div>
<p>Der Umsatz steigt staerker als die Buchungszahl. Das spricht dafuer, dass der hoehere Tagespreis und eine bessere Belegung der verfuegbaren Naechte den Monat getragen haben.</p>
</article>
<article class="development">
<div class="development-top"><span class="impact-dot positive"></span><h3>Auslastung erreicht ein solides Niveau</h3></div>
<p>Mit 78,4 Prozent ist ein grosser Teil der verfuegbaren Kapazitaet verkauft. Gleichzeitig verbleibt genug Spielraum, um einzelne schwache Wochentage gezielt zu stimulieren.</p>
</article>
<article class="development">
<div class="development-top"><span class="impact-dot neutral"></span><h3>Stornos bleiben ein Beobachtungspunkt</h3></div>
<p>Die Stornoquote ist nicht kritisch, sollte aber nach Buchungskanal und Vorlaufzeit beobachtet werden. So laesst sich erkennen, ob bestimmte Tarife oder Plattformen ueberdurchschnittlich betroffen sind.</p>
</article>
<article class="development">
<div class="development-top"><span class="impact-dot neutral"></span><h3>Aufenthaltsdauer bleibt kompakt</h3></div>
<p>Die durchschnittliche Aufenthaltsdauer von 3,6 Naechten sorgt fuer regelmaessige Gaestewechsel. Das kann Umsatzchancen schaffen, erhoeht jedoch zugleich den operativen Aufwand je belegter Nacht.</p>
</article>
</div>
</section>
<section class="section">
<div class="section-heading">
<div>
<div class="section-kicker">Naechste Schritte</div>
<h2>Priorisierte Empfehlungen</h2>
</div>
</div>
<div class="recommendations">
<article class="recommendation">
<div class="priority">1</div>
<div>
<div class="category">Preisgestaltung</div>
<h3>Nachfragestarke Wochenenden differenzierter bepreisen</h3>
<p><strong>Warum:</strong> Umsatz, Tagespreis und Auslastung entwickeln sich gleichzeitig positiv. Dadurch besteht an stark nachgefragten Terminen Spielraum, den Preis vorsichtig weiter auszureizen.</p>
<p class="action-line"><strong>Massnahme:</strong> Fuer Freitage, Samstage und lokale Spitzentermine einen Preisaufschlag von zunaechst 5 Prozent testen und die Buchungsgeschwindigkeit wochenweise kontrollieren.</p>
<p><strong>Erwarteter Effekt:</strong> Hoeherer Umsatz pro verfuegbarer Nacht ohne pauschale Preiserhoehung fuer den gesamten Monat.</p>
</div>
</article>
<article class="recommendation">
<div class="priority">2</div>
<div>
<div class="category">Verfuegbarkeit &amp; Buchungssteuerung</div>
<h3>Schwache Wochentage mit Mindestaufenthalten entlasten</h3>
<p><strong>Warum:</strong> Die Auslastung ist insgesamt gut, dennoch koennen einzelne Luecken zwischen kurzen Aufenthalten entstehen und wertvolle Naechte blockieren.</p>
<p class="action-line"><strong>Massnahme:</strong> Fuer ausgewaehlte Anreisetage flexible Mindestaufenthalte einsetzen und kurze Restluecken gezielt fuer Zwei-Nacht-Buchungen freigeben.</p>
<p><strong>Erwarteter Effekt:</strong> Weniger unverkaeufliche Einzelnächte und eine gleichmaessigere Belegung.</p>
</div>
</article>
<article class="recommendation">
<div class="priority">3</div>
<div>
<div class="category">Gaeste &amp; Bewertungen</div>
<h3>Stornierungen nach Kanal und Vorlauf auswerten</h3>
<p><strong>Warum:</strong> Die aktuelle Stornoquote ist tragbar, liefert ohne Segmentierung aber noch keinen Hinweis auf die eigentliche Ursache.</p>
<p class="action-line"><strong>Massnahme:</strong> Stornos kuenftig nach Buchungskanal, Tarifart und Tagen bis zur Anreise gruppieren und im naechsten Report separat vergleichen.</p>
<p><strong>Erwarteter Effekt:</strong> Gezieltere Tarifregeln und weniger vermeidbare kurzfristige Ausfaelle.</p>
</div>
</article>
</div>
</section>
<section class="section">
<div class="outlook">
<div class="section-kicker" style="color: rgba(255,255,255,.7)">Ausblick</div>
<h2>Gute Ausgangslage fuer den Fruehsommer</h2>
<p>Die Kombination aus stabiler Nachfrage und verbessertem Tagespreis schafft eine robuste Basis fuer Juni. Entscheidend ist, Preiserhoehungen nur an Tagen mit erkennbar hoher Nachfrage einzusetzen und freie Randtage nicht versehentlich mit zu strengen Aufenthaltsregeln zu blockieren.</p>
</div>
<div class="notes">
<strong>Hinweise zur Datengrundlage</strong>
<ul>
<li>Die Bewertung basiert auf Monatsaggregaten; Unterschiede zwischen Wochentagen und Buchungskanaelen sind darin noch nicht getrennt sichtbar.</li> </ul>
</div>
<div class="legal">Dieser Report ist eine datenbasierte Entscheidungshilfe. Prognosen und erwartete Effekte sind keine Garantie fuer zukuenftige Ergebnisse.</div>
</section>
</main>
</body>
</html>