Dialyse-Webseite/files/flyer_template.html

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Praxis-Flyer | Dialysezentrum Berlin-Mahlsdorf</title>
<style>
  @page {
    size: A4 portrait;
    margin: 0;
  }
  
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    color: #1e293b;
    background: #ffffff;
    line-height: 1.36;
    font-size: 8.2pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .page {
    width: 210mm;
    height: 297mm;
    position: relative;
    padding: 9mm 11.5mm 8.5mm;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Header */
  .flyer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2.5mm;
    border-bottom: 2px solid #0284c7;
    margin-bottom: 3mm;
  }

  .brand {
    display: flex;
    align-items: center;
  }

  .header-contact {
    text-align: right;
    font-size: 8pt;
    color: #07384d;
    line-height: 1.35;
  }

  .header-contact strong {
    color: #07384d;
  }

  .header-contact .email-link {
    color: #0284c7;
    font-weight: 700;
  }

  /* Motto Banner */
  .motto-banner {
    background: linear-gradient(135deg, #07384d 0%, #0b4f6c 100%);
    color: #ffffff;
    border-radius: 6px;
    padding: 2.8mm 4.2mm;
    margin-bottom: 3mm;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3mm;
  }

  .motto-text {
    font-size: 9.6pt;
    font-weight: 700;
    font-style: italic;
    color: #f0f9ff;
    white-space: nowrap;
  }

  .motto-sub {
    font-size: 7.4pt;
    color: #bae6fd;
    white-space: nowrap;
    font-weight: 600;
  }

  /* Physicians Row */
  .physicians-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3mm;
    margin-bottom: 3.2mm;
  }

  .physician-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3.5px solid #0284c7;
    border-radius: 6px;
    padding: 2.4mm 3mm;
  }

  .physician-name {
    font-size: 8.8pt;
    font-weight: 700;
    color: #07384d;
    line-height: 1.22;
  }

  .physician-role {
    font-size: 7.3pt;
    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;
  }

  /* Main 2-Column Content Grid */
  .content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.6mm;
    flex: 1;
    margin-bottom: 3.2mm;
  }

  .col-stack {
    display: flex;
    flex-direction: column;
    gap: 3mm;
    height: 100%;
  }

  .section-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 3mm 3.6mm;
  }

  .section-card.card-grow {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .card-header {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 8.8pt;
    font-weight: 700;
    color: #07384d;
    margin-bottom: 1.8mm;
    padding-bottom: 1.1mm;
    border-bottom: 1px solid #e2e8f0;
  }

  .card-header svg {
    width: 13px;
    height: 13px;
    fill: #0284c7;
    flex-shrink: 0;
  }

  /* Lists & Details */
  .check-list {
    list-style: none;
    font-size: 7.7pt;
    color: #334155;
  }

  .check-list li {
    position: relative;
    padding-left: 12px;
    margin-bottom: 1.25mm;
    line-height: 1.32;
  }

  .check-list li:last-child {
    margin-bottom: 0;
  }

  .check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    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;
  }

  /* Schedule rows */
  .sched-list {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
  }

  .sched-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 7.7pt;
    padding: 1.4mm 0;
    border-bottom: 1px dashed #e2e8f0;
    line-height: 1.35;
  }

  .sched-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .sched-title {
    font-weight: 700;
    color: #07384d;
    white-space: nowrap;
  }

  .sched-hours {
    text-align: right;
    color: #1e293b;
  }

  .badge-tag {
    background: #e0f2fe;
    color: #0369a1;
    font-size: 6.3pt;
    font-weight: 700;
    padding: 0.5px 3.5px;
    border-radius: 3px;
    margin-right: 2px;
  }

  /* Locations */
  .loc-block {
    margin-bottom: 2.4mm;
    font-size: 7.7pt;
    line-height: 1.36;
  }

  .loc-block:last-child {
    margin-bottom: 0;
  }

  .loc-head-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5mm;
  }

  .loc-head {
    font-weight: 700;
    color: #07384d;
    font-size: 8.2pt;
  }

  .loc-badge {
    background: #e0f2fe;
    color: #0369a1;
    font-size: 6.6pt;
    font-weight: 700;
    padding: 0.4mm 1.8mm;
    border-radius: 99px;
  }

  .loc-body {
    color: #475569;
  }

  .loc-body strong {
    color: #07384d;
  }

  /* Anfahrt & Map */
  .anfahrt-flex {
    display: flex;
    gap: 3.2mm;
    align-items: center;
  }

  .anfahrt-text {
    flex: 1;
    font-size: 7.5pt;
    color: #475569;
    line-height: 1.32;
  }

  .anfahrt-text p {
    margin-bottom: 1.2mm;
  }

  .anfahrt-text p:last-child {
    margin-bottom: 0;
  }

  .map-thumb {
    width: 35mm;
    height: 40mm;
    object-fit: contain;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #ffffff;
    padding: 1mm;
    flex-shrink: 0;
  }

  /* Photo Showcase Card */
  .photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.6mm;
    flex: 1;
  }

  .photo-item {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    height: 100%;
    min-height: 58mm;
  }

  .photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 65%;
    display: block;
  }

  .photo-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    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-weight: 600;
    padding: 3.5mm 2.2mm 1.2mm;
    white-space: nowrap;
  }

  /* Bottom Callout & Footer */
  .footer-callout {
    background: linear-gradient(135deg, #07384d 0%, #0284c7 100%);
    color: #ffffff;
    border-radius: 6px;
    padding: 2.8mm 4.2mm;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3mm;
  }

  .callout-left {
    flex: 1;
  }

  .callout-title {
    font-size: 8.6pt;
    font-weight: 700;
    margin-bottom: 0.4mm;
    white-space: nowrap;
  }

  .callout-sub {
    font-size: 7pt;
    color: #e0f2fe;
    white-space: nowrap;
  }

  .callout-channels {
    display: flex;
    gap: 4.5mm;
    align-items: center;
  }

  .callout-item {
    text-align: right;
  }

  .callout-item small {
    display: block;
    font-size: 5.8pt;
    font-weight: 600;
    color: #bae6fd;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .callout-item .channel-val {
    font-size: 9pt;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
  }

  .flyer-bottom-info {
    border-top: 1px solid #e2e8f0;
    padding-top: 1.4mm;
    margin-top: 1.8mm;
    display: flex;
    justify-content: space-between;
    font-size: 6.3pt;
    color: #64748b;
    white-space: nowrap;
  }
</style>
</head>
<body>

<div class="page">
  <!-- 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">
    </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>
  </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>

  <!-- Physicians Row -->
  <div class="physicians-row">
    <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>

  <!-- Main 2-Column Content -->
  <div class="content-grid">
    <!-- LEFT COLUMN: Leistungen, Komfort & Behandlungszeiten -->
    <div class="col-stack">
      <!-- Leistungen -->
      <div class="section-card">
        <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>
        </ul>
      </div>

      <!-- Feriendialyse & Komfort -->
      <div class="section-card">
        <div class="card-header">
          <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          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>
        </ul>
      </div>

      <!-- Öffnungszeiten -->
      <div class="section-card card-grow">
        <div class="card-header">
          <svg viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
          Behandlungs- &amp; Sprechzeiten
        </div>
        <div class="sched-list">
          <div class="sched-item">
            <div class="sched-title">Dialyse (Mo, Mi, Fr):</div>
            <div class="sched-hours">
              <div><span class="badge-tag">1. Schicht</span> 07:00 &ndash; 13:00 Uhr</div>
              <div><span class="badge-tag">2. Schicht</span> 13:00 &ndash; 18:00 Uhr</div>
              <div><span class="badge-tag">3. Schicht</span> 14:30 &ndash; 20:00 Uhr</div>
            </div>
          </div>
          <div class="sched-item">
            <div class="sched-title">Dialyse (Di, Do, Sa):</div>
            <div class="sched-hours"><span class="badge-tag">1. Schicht</span> 07:00 &ndash; 13:00 Uhr</div>
          </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>
          <div class="sched-item">
            <div class="sched-title">Ambulanz (Di, Do):</div>
            <div class="sched-hours">08:30 &ndash; 12:00 Uhr</div>
          </div>
        </div>
      </div>
    </div>

    <!-- RIGHT COLUMN: Standorte, Anfahrt & Praxis-Einblicke -->
    <div class="col-stack">
      <!-- Standorte -->
      <div class="section-card">
        <div class="card-header">
          <svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
          Unsere Standorte in Berlin
        </div>
        <div class="loc-block">
          <div class="loc-head-row">
            <div class="loc-head">Zentrumsdialyse (Hauptpraxis &amp; Ambulanz)</div>
            <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>
          </div>
        </div>
        <div class="loc-block" style="border-top: 1px dashed #e2e8f0; padding-top: 2mm;">
          <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>
          </div>
        </div>
      </div>

      <!-- 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)
        </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>
          </div>
          <img src="file:///d:/web-repo2/files/flyer_map.png" class="map-thumb" alt="Lageplan">
        </div>
      </div>

      <!-- Praxis-Einblicke (2 Bilder) -->
      <div class="section-card card-grow">
        <div class="card-header">
          <svg viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
          Einblicke in unsere Praxis
        </div>
        <div class="photo-grid">
          <div class="photo-item">
            <img src="file:///d:/web-repo2/img/gallery/praxis1.jpg" alt="Praxis außen">
            <div class="photo-caption">Praxisgebäude &bull; Thorner Str. 1</div>
          </div>
          <div class="photo-item">
            <img src="file:///d:/web-repo2/img/gallery/leistung1.jpg" alt="Moderner Dialyseplatz">
            <div class="photo-caption">Dialyseplatz im Grünen</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 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>
    <div class="callout-channels">
      <div class="callout-item">
        <small>Tel. Dialyse</small>
        <div class="channel-val">030 / 566 24 84</div>
      </div>
      <div class="callout-item">
        <small>Tel. Ambulanz</small>
        <div class="channel-val">030 / 566 25 39</div>
      </div>
      <div class="callout-item">
        <small>E-Mail-Kontakt</small>
        <div class="channel-val">kontakt@dialyse-berlin.net</div>
      </div>
    </div>
  </div>

  <!-- Bottom Info Line -->
  <div class="flyer-bottom-info">
    <div>Dialysezentrum Berlin-Mahlsdorf &bull; Zentrum für Nephrologie und Dialyse &bull; Dr. med. Bianca Bischoff &amp; Dr. med. Juliane Hoffzimmer</div>
    <div>Thorner Str. 1, 12623 Berlin &bull; Blumberger Damm 130, 12685 Berlin</div>
  </div>
</div>

</body>
</html>