chriz/Dialyse-Webseite
1
0 Fork 0
forked from itchy/Dialyse-Webseite
Code Pull Requests Actions Activity

Flyer Optimierungen.

Browse Source
This commit is contained in:
chriz committed 2026-10-20 12:42:38 +02:00
1 parent ac8468ca76
commit bc1c5a62fb
2 files changed
+104 -141
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

files/dialyse_flyer.pdf
BIN
View File
Binary file not shown.
files/flyer_template.html
+104 -141
View File
@@ -19,8 +19,8 @@
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
color: #1e293b;
background: #ffffff;
line-height: 1.36;
font-size: 8.2pt;
line-height: 1.45;
font-size: 9pt;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
@@ -29,7 +29,7 @@
width: 210mm;
height: 297mm;
position: relative;
padding: 9mm 11.5mm 8.5mm;
padding: 9.5mm 11.5mm 8.5mm;
overflow: hidden;
display: flex;
flex-direction: column;
@@ -40,9 +40,9 @@
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 2.5mm;
padding-bottom: 3mm;
border-bottom: 2px solid #0284c7;
margin-bottom: 3mm;
margin-bottom: 3.5mm;
}
.brand {
@@ -52,16 +52,16 @@
.header-contact {
text-align: right;
font-size: 8pt;
font-size: 8.8pt;
color: #07384d;
line-height: 1.35;
line-height: 1.42;
}
.header-contact strong {
color: #07384d;
}
.header-contact .email-link {
.header-contact .web-link {
color: #0284c7;
font-weight: 700;
}
@@ -71,8 +71,8 @@
background: linear-gradient(135deg, #07384d 0%, #0b4f6c 100%);
color: #ffffff;
border-radius: 6px;
padding: 2.8mm 4.2mm;
margin-bottom: 3mm;
padding: 3.2mm 4.5mm;
margin-bottom: 3.5mm;
display: flex;
justify-content: space-between;
align-items: center;
@@ -80,7 +80,7 @@
}
.motto-text {
font-size: 9.6pt;
font-size: 10.2pt;
font-weight: 700;
font-style: italic;
color: #f0f9ff;
@@ -88,7 +88,7 @@
}
.motto-sub {
font-size: 7.4pt;
font-size: 8pt;
color: #bae6fd;
white-space: nowrap;
font-weight: 600;
@@ -98,8 +98,8 @@
.physicians-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3mm;
margin-bottom: 3.2mm;
gap: 3.4mm;
margin-bottom: 3.6mm;
}
.physician-card {
@@ -107,43 +107,38 @@
border: 1px solid #e2e8f0;
border-left: 3.5px solid #0284c7;
border-radius: 6px;
padding: 2.4mm 3mm;
padding: 3mm 3.4mm;
}
.physician-name {
font-size: 8.8pt;
font-size: 9.4pt;
font-weight: 700;
color: #07384d;
line-height: 1.22;
line-height: 1.25;
}
.physician-role {
font-size: 7.3pt;
font-size: 7.2pt;
font-weight: 600;
color: #0284c7;
margin-top: 0.5mm;
line-height: 1.22;
}
.physician-meta {
font-size: 6.7pt;
color: #64748b;
margin-top: 0.8mm;
line-height: 1.3;
white-space: nowrap;
}
/* Main 2-Column Content Grid */
.content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3.6mm;
gap: 3.8mm;
flex: 1;
margin-bottom: 3.2mm;
margin-bottom: 3.5mm;
}
.col-stack {
display: flex;
flex-direction: column;
gap: 3mm;
gap: 3.5mm;
height: 100%;
}
@@ -151,7 +146,7 @@
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 3mm 3.6mm;
padding: 3.8mm 4.2mm;
}
.section-card.card-grow {
@@ -163,18 +158,18 @@
.card-header {
display: flex;
align-items: center;
gap: 5px;
font-size: 8.8pt;
gap: 6px;
font-size: 9.6pt;
font-weight: 700;
color: #07384d;
margin-bottom: 1.8mm;
padding-bottom: 1.1mm;
margin-bottom: 2.5mm;
padding-bottom: 1.5mm;
border-bottom: 1px solid #e2e8f0;
}
.card-header svg {
width: 13px;
height: 13px;
width: 14px;
height: 14px;
fill: #0284c7;
flex-shrink: 0;
}
@@ -182,19 +177,19 @@
/* Lists & Details */
.check-list {
list-style: none;
font-size: 7.7pt;
font-size: 8.8pt;
color: #334155;
display: flex;
flex-direction: column;
justify-content: space-around;
flex: 1;
gap: 2.2mm;
}
.check-list li {
position: relative;
padding-left: 12px;
margin-bottom: 1.25mm;
line-height: 1.32;
}
.check-list li:last-child {
margin-bottom: 0;
padding-left: 14px;
line-height: 1.42;
}
.check-list li::before {
@@ -204,15 +199,7 @@
top: 0;
color: #0284c7;
font-weight: bold;
font-size: 7.9pt;
}
.sub-note {
display: block;
font-size: 7.1pt;
color: #475569;
margin-top: 0.3mm;
line-height: 1.28;
font-size: 8.8pt;
}
/* Schedule rows */
@@ -227,10 +214,10 @@
display: flex;
justify-content: space-between;
align-items: center;
font-size: 7.7pt;
padding: 1.4mm 0;
font-size: 8.5pt;
padding: 1.8mm 0;
border-bottom: 1px dashed #e2e8f0;
line-height: 1.35;
line-height: 1.42;
}
.sched-item:last-child {
@@ -252,18 +239,18 @@
.badge-tag {
background: #e0f2fe;
color: #0369a1;
font-size: 6.3pt;
font-size: 7pt;
font-weight: 700;
padding: 0.5px 3.5px;
padding: 0.5px 4px;
border-radius: 3px;
margin-right: 2px;
margin-right: 3px;
}
/* Locations */
.loc-block {
margin-bottom: 2.4mm;
font-size: 7.7pt;
line-height: 1.36;
margin-bottom: 2.8mm;
font-size: 8.6pt;
line-height: 1.45;
}
.loc-block:last-child {
@@ -274,21 +261,21 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5mm;
margin-bottom: 0.7mm;
}
.loc-head {
font-weight: 700;
color: #07384d;
font-size: 8.2pt;
font-size: 9pt;
}
.loc-badge {
background: #e0f2fe;
color: #0369a1;
font-size: 6.6pt;
font-size: 7.2pt;
font-weight: 700;
padding: 0.4mm 1.8mm;
padding: 0.5mm 2.2mm;
border-radius: 99px;
}
@@ -303,19 +290,19 @@
/* Anfahrt & Map */
.anfahrt-flex {
display: flex;
gap: 3.2mm;
gap: 3.5mm;
align-items: center;
}
.anfahrt-text {
flex: 1;
font-size: 7.5pt;
font-size: 8.5pt;
color: #475569;
line-height: 1.32;
line-height: 1.42;
}
.anfahrt-text p {
margin-bottom: 1.2mm;
margin-bottom: 2mm;
}
.anfahrt-text p:last-child {
@@ -323,8 +310,8 @@
}
.map-thumb {
width: 35mm;
height: 40mm;
width: 39mm;
height: 44mm;
object-fit: contain;
border: 1px solid #cbd5e1;
border-radius: 5px;
@@ -337,7 +324,7 @@
.photo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.6mm;
gap: 2.8mm;
flex: 1;
}
@@ -347,18 +334,7 @@
overflow: hidden;
border: 1px solid #cbd5e1;
height: 100%;
min-height: 55mm;
}
.photo-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
min-height: 62mm;
}
.photo-caption {
@@ -368,9 +344,9 @@
right: 0;
background: linear-gradient(to top, rgba(7, 56, 77, 0.9), rgba(7, 56, 77, 0));
color: #ffffff;
font-size: 6.6pt;
font-size: 6.5pt;
font-weight: 600;
padding: 3.5mm 2.2mm 1.2mm;
padding: 4mm 1.5mm 1.5mm;
text-align: center;
white-space: nowrap;
}
@@ -380,34 +356,36 @@
background: linear-gradient(135deg, #07384d 0%, #0284c7 100%);
color: #ffffff;
border-radius: 6px;
padding: 2.8mm 4.2mm;
padding: 3mm 4.5mm;
display: flex;
justify-content: space-between;
align-items: center;
gap: 3mm;
gap: 4mm;
}
.callout-left {
flex: 1;
min-width: 0;
}
.callout-title {
font-size: 8.6pt;
font-size: 9pt;
font-weight: 700;
margin-bottom: 0.4mm;
white-space: nowrap;
}
.callout-sub {
font-size: 7pt;
font-size: 7.4pt;
color: #e0f2fe;
white-space: nowrap;
}
.callout-channels {
display: flex;
gap: 4.5mm;
gap: 5mm;
align-items: center;
flex-shrink: 0;
}
.callout-item {
@@ -416,7 +394,7 @@
.callout-item small {
display: block;
font-size: 5.8pt;
font-size: 6pt;
font-weight: 600;
color: #bae6fd;
text-transform: uppercase;
@@ -424,7 +402,7 @@
}
.callout-item .channel-val {
font-size: 9pt;
font-size: 8.8pt;
font-weight: 800;
color: #ffffff;
white-space: nowrap;
@@ -432,16 +410,16 @@
.flyer-bottom-info {
border-top: 1px solid #e2e8f0;
padding-top: 1.3mm;
margin-top: 1.5mm;
padding-top: 1.4mm;
margin-top: 1.6mm;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.4mm;
font-size: 6.4pt;
font-size: 6.6pt;
color: #64748b;
line-height: 1.28;
line-height: 1.3;
}
</style>
</head>
@@ -451,18 +429,18 @@
<!-- Top Brand Header -->
<div class="flyer-header">
<div class="brand">
<img src="file:///d:/web-repo2/img/logo_dialysezentrum.png" style="height: 15mm; width: auto; object-fit: contain;" alt="Dialysezentrum Berlin-Mahlsdorf">
<img src="file:///d:/web-repo2/img/logo_dialysezentrum.png" style="height: 15.5mm; width: auto; object-fit: contain;" alt="Dialysezentrum Berlin-Mahlsdorf">
</div>
<div class="header-contact">
<div>Tel. Dialyse: <strong>030 / 566 24 84</strong> &bull; Ambulanz: <strong>030 / 566 25 39</strong></div>
<div>E-Mail: <span class="email-link">kontakt@dialyse-berlin.net</span> &bull; Web: <strong>www.dialyse-berlin.net</strong></div>
<div><strong>Praxis für Nephrologie &amp; Dialyse</strong></div>
<div>Web: <span class="web-link">www.dialyse-berlin.net</span></div>
</div>
</div>
<!-- Motto Banner -->
<div class="motto-banner">
<div class="motto-text">&bdquo;Die individuelle Dialyse im grünen Gürtel von Berlin&ldquo;</div>
<div class="motto-sub">Seit 1992 &bull; 2 Standorte (34 Plätze) &bull; Feriendialyse &bull; Barrierefrei</div>
<div class="motto-sub">2 Standorte &bull; Feriendialyse &bull; Barrierefrei</div>
</div>
<!-- Physicians Row -->
@@ -470,17 +448,14 @@
<div class="physician-card">
<div class="physician-name">Dr. med. Bianca Bischoff</div>
<div class="physician-role">Fachärztin für Innere Medizin &amp; Nephrologie</div>
<div class="physician-meta">Approbation 2002 &bull; Ärztekammer Berlin</div>
</div>
<div class="physician-card">
<div class="physician-name">Dr. med. Juliane Hoffzimmer</div>
<div class="physician-role">Fachärztin für Innere Medizin &amp; Nephrologie</div>
<div class="physician-meta">Approbation 2009 &bull; Ärztekammer Berlin</div>
</div>
<div class="physician-card">
<div class="physician-name">Dr. med. Claudia Körner</div>
<div class="physician-role">Fachärztin für Innere Medizin</div>
<div class="physician-meta">Approbation 2004 &bull; Ärztekammer Berlin</div>
</div>
</div>
@@ -489,26 +464,16 @@
<!-- LEFT COLUMN: Leistungen, Komfort & Behandlungszeiten -->
<div class="col-stack">
<!-- Leistungen -->
<div class="section-card">
<div class="section-card card-grow">
<div class="card-header">
<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
Leistungsspektrum &amp; Medizintechnik
</div>
<ul class="check-list">
<li><strong>Nephrologische Ambulanz:</strong> Umfassende Diagnostik &amp; Therapie von Nierenerkrankungen</li>
<li>Optimale <strong>Blutdruck- &amp; Blutzuckereinstellung</strong> als wesentlicher Schwerpunkt</li>
<li>Spezialisierte Betreuung <strong>niereninsuffizienter Diabetiker</strong></li>
<li><strong>Sonographie</strong> (Ultraschall Nieren/Abdomen), EKG &amp; 24-Std.-Blutdruckmessung</li>
<li>
<strong>Hämodialyse (HD) &amp; Hämodiafiltration (HDF / Online-HDF):</strong>
<span class="sub-note">Nikkiso DBB-07 &amp; DBB-EXA mit <strong>Haemo-Master (BV-UFC/COC)</strong> zur aktiven Blutvolumen-, Ultrafiltrations- &amp; Leitfähigkeitsregelung</span>
</li>
<li>
<strong>Fresenius BCM (Body Composition Monitor):</strong>
<span class="sub-note">Bioelektrische Präzisionsmessung zur exakten Bestimmung des Optimalgewichts</span>
</li>
<li><strong>High- &amp; Low-Flux-Dialysatoren</strong>, moderne Osmoseanlage &amp; Praxislabor</li>
<li><strong>Transplantationsvorbereitung</strong> &amp; Nachsorge &bull; <strong>Ernährungsberatung</strong></li>
<li><strong>Nephrologische Ambulanz:</strong> Diagnostik &amp; Therapie von Nierenerkrankungen, Blutdruck- und Diabeteseinstellung</li>
<li><strong>Funktionsdiagnostik:</strong> Sonographie (Nieren/Abdomen), EKG &amp; 24-Std.-Blutdruckmessung</li>
<li><strong>Dialyseverfahren (HD &amp; Online-HDF):</strong> Kreislaufschonend mit Nikkiso <strong>Haemo-Master</strong> &amp; <strong>Fresenius BCM</strong></li>
<li><strong>Begleitende Betreuung:</strong> Transplantationsvorbereitung, Nachsorge &amp; individuelle Ernährungsberatung</li>
</ul>
</div>
@@ -519,11 +484,9 @@
Feriendialyse &amp; Patientenkomfort
</div>
<ul class="check-list">
<li><strong>Ganzjährige Feriendialysen</strong> für Berlin-Besucher und Urlauber</li>
<li>Vollständig <strong>barrierefreier Zugang</strong> für bewegungseingeschränkte Patienten</li>
<li>Erfahrenes Team aus <strong>3 Fachärztinnen und 23 Pflege- &amp; Servicekräften</strong></li>
<li>Wohlfühlatmosphäre mit <strong>kostenlosem WLAN, TV &amp; Imbiss- und Getränkeservice</strong></li>
<li>Enge Kooperation mit Haus- &amp; Fachärzten sowie umliegenden Krankenhäusern</li>
<li><strong>Ganzjährige Feriendialysen</strong> für Berlin-Besucher in barrierefreien Praxisräumen</li>
<li><strong>Persönliche Betreuung</strong> durch 3 Fachärztinnen sowie 23 Pflege- und Servicekräfte</li>
<li><strong>Wohlfühlatmosphäre</strong> mit kostenlosem WLAN, Patienten-TV, Imbiss &amp; Getränken</li>
</ul>
</div>
@@ -548,7 +511,10 @@
</div>
<div class="sched-item">
<div class="sched-title">Ambulanz (Mo, Mi, Fr):</div>
<div class="sched-hours">08:30 &ndash; 11:30 &bull; n. Vereinb. 14:00 &ndash; 17:00</div>
<div class="sched-hours">
<div>08:30 &ndash; 11:30 Uhr</div>
<div>14:00 &ndash; 17:00 Uhr (n. Vereinb.)</div>
</div>
</div>
<div class="sched-item">
<div class="sched-title">Ambulanz (Di, Do):</div>
@@ -572,20 +538,17 @@
<span class="loc-badge">16 Plätze</span>
</div>
<div class="loc-body">
<strong>Thorner Straße 1 &bull; 12623 Berlin-Mahlsdorf</strong><br>
Telefon Dialyse: <strong>030 / 566 24 84</strong><br>
Telefon Ambulanz: <strong>030 / 566 25 39</strong><br>
E-Mail: <strong style="color: #0284c7;">kontakt@dialyse-berlin.net</strong>
<strong>Thorner Straße 1 &bull; 12623 Berlin-Mahlsdorf</strong>
</div>
</div>
<div class="loc-block" style="border-top: 1px dashed #e2e8f0; padding-top: 2mm;">
<div class="loc-block" style="border-top: 1px dashed #e2e8f0; padding-top: 2.4mm;">
<div class="loc-head-row">
<div class="loc-head">Satellitendialyse Berlin-Marzahn</div>
<span class="loc-badge">18 Plätze</span>
</div>
<div class="loc-body">
<strong>Blumberger Damm 130 &bull; 12685 Berlin</strong><br>
Eingang: Pritzhagener Weg 21 &bull; Tel.: <strong>030 / 566 24 84</strong>
Eingang: Pritzhagener Weg 21
</div>
</div>
</div>
@@ -593,14 +556,14 @@
<!-- Anfahrt & Skizze -->
<div class="section-card">
<div class="card-header">
<svg viewBox="0 0 24 24"><path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25-.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"/></svg>
Anfahrt &amp; Parken (Thorner Straße 1)
<svg viewBox="0 0 24 24"><path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07-.36-.25-.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"/></svg>
Anfahrt &amp; Parken (Hauptpraxis)
</div>
<div class="anfahrt-flex">
<div class="anfahrt-text">
<p><strong>ÖPNV:</strong> S-Bahn <strong>S5</strong> oder Regionalbahn bis <strong>S-Bhf. Berlin-Mahlsdorf</strong>, von dort wenige Minuten Fußweg oder per Bus.</p>
<p><strong>Pkw:</strong> Über die <strong>B1 / B5 (Alt-Mahlsdorf)</strong> in die Hönower Str., weiter über Waldowstr. und Wilhelmsmühlenweg in die Thorner Str. 1.</p>
<p style="color: #0284c7; font-weight: 600;">&#x2713; Gute Parkmöglichkeiten direkt vor der Praxis vorhanden.</p>
<p><strong>ÖPNV:</strong> S-Bahn <strong>S5</strong> oder Regionalbahn bis <strong>S-Bhf. Mahlsdorf</strong> (wenige Gehminuten).</p>
<p><strong>Pkw:</strong> Über <strong>B1/B5 (Alt-Mahlsdorf)</strong> &rarr; Hönower Str. &rarr; Waldowstr. &rarr; Thorner Str. 1.</p>
<p style="color: #0284c7; font-weight: 600;">&#x2713; Parkplätze direkt vor der Praxis.</p>
</div>
<img src="file:///d:/web-repo2/files/flyer_map.png" class="map-thumb" alt="Lageplan">
</div>
@@ -616,8 +579,8 @@
<div class="photo-item" style="background: url('file:///d:/web-repo2/img/gallery/praxis1.jpg') 92% 65% / cover no-repeat;">
<div class="photo-caption">Praxisgebäude &bull; Thorner Str. 1</div>
</div>
<div class="photo-item" style="background: url('file:///d:/web-repo2/img/gallery/leistung1.jpg') 44% 55% / cover no-repeat;">
<div class="photo-caption">Dialyseplatz im Grünen</div>
<div class="photo-item" style="background: url('file:///d:/web-repo2/img/gallery/behandlung2.jpg') center center / cover no-repeat;">
<div class="photo-caption">Dialyseplatz mit Nikkiso-Technik</div>
</div>
</div>
</div>
@@ -627,8 +590,8 @@
<!-- Bottom Action Callout -->
<div class="footer-callout">
<div class="callout-left">
<div class="callout-title">Haben Sie Fragen oder wünschen Sie einen Termin?</div>
<div class="callout-sub">Nehmen Sie direkt Kontakt auf &bull; Online-Anfrage: www.dialyse-berlin.net</div>
<div class="callout-title">Kontakt &amp; Terminvereinbarung</div>
<div class="callout-sub">Wir beraten Sie gern persönlich</div>
</div>
<div class="callout-channels">
<div class="callout-item">
@@ -640,7 +603,7 @@
<div class="channel-val">030 / 566 25 39</div>
</div>
<div class="callout-item">
<small>E-Mail-Kontakt</small>
<small>E-Mail</small>
<div class="channel-val">kontakt@dialyse-berlin.net</div>
</div>
</div>