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.35;
    font-size: 8.5pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .page {
    width: 210mm;
    height: 297mm;
    position: relative;
    padding: 9.5mm 12mm;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

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

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

  .logo-badge {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #07384d 0%, #0284c7 100%);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
  }

  .logo-badge svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
  }

  .brand-text h1 {
    font-size: 14pt;
    font-weight: 800;
    color: #07384d;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }

  .brand-text h1 span {
    color: #0284c7;
  }

  .brand-text p {
    font-size: 7pt;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1px;
  }

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

  .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 4mm;
    margin-top: 2mm;
    margin-bottom: 2mm;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3mm;
  }

  .motto-text {
    font-size: 9.8pt;
    font-weight: 700;
    font-style: italic;
    color: #f0f9ff;
  }

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

  /* Physicians Row (Shortened to Name & Role) */
  .physicians-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5mm;
    margin-bottom: 2.2mm;
  }

  .physician-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #0284c7;
    border-radius: 5px;
    padding: 2mm 2.5mm;
  }

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

  .physician-role {
    font-size: 7pt;
    font-weight: 600;
    color: #0284c7;
    margin-top: 1px;
    line-height: 1.2;
  }

  /* Main 2-Column Content Grid */
  .content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5mm;
  }

  .section-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 2.8mm 3.2mm;
    margin-bottom: 2.2mm;
  }

  .section-card:last-child {
    margin-bottom: 0;
  }

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

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

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

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

  .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.5pt;
  }

  /* Schedule rows */
  .sched-item {
    display: flex;
    justify-content: space-between;
    font-size: 7.1pt;
    padding: 0.7mm 0;
    border-bottom: 1px dashed #e2e8f0;
    line-height: 1.25;
  }

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

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

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

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

  /* Locations */
  .loc-block {
    margin-bottom: 1.8mm;
    font-size: 7.1pt;
    line-height: 1.25;
  }

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

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

  .loc-body {
    color: #475569;
  }

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

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

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

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

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

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

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

  .callout-left {
    flex: 1;
  }

  .callout-title {
    font-size: 8.5pt;
    font-weight: 700;
    margin-bottom: 0.5mm;
  }

  .callout-sub {
    font-size: 6.8pt;
    color: #e0f2fe;
  }

  .callout-channels {
    display: flex;
    gap: 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.05em;
  }

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

  .flyer-bottom-info {
    border-top: 1px solid #e2e8f0;
    padding-top: 1.2mm;
    margin-top: 1.8mm;
    display: flex;
    justify-content: space-between;
    font-size: 6.6pt;
    color: #64748b;
  }
</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: 13.5mm; width: auto; object-fit: contain;" alt="Dialysezentrum Berlin-Mahlsdorf">
    </div>
    <div class="header-contact">
      <div>Tel. <strong>030 / 566 24 84</strong></div>
      <div>E-Mail: <span class="email-link">kontakt@dialyse-berlin.net</span></div>
      <div>Web: <span>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 &bull; Feriendialyse &bull; Barrierefrei</div>
  </div>

  <!-- Physicians (Shortened to Name and Role) -->
  <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>
    <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>
    <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>
  </div>

  <!-- Main 2-Column Content -->
  <div class="content-grid">
    <!-- LEFT COLUMN: Leistungen & Behandlungszeiten -->
    <div>
      <!-- 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> Diagnostik &amp; Therapie aller Nierenerkrankungen</li>
          <li>Optimale <strong>Blutdruck- &amp; Blutzuckereinstellung</strong> als Schwerpunkt</li>
          <li>Spezialisierte Betreuung <strong>niereninsuffizienter Diabetiker</strong></li>
          <li><strong>Sonographie</strong> (Ultraschall Nieren/Abdomen), EKG, 24h-Blutdruck</li>
          <li><strong>Hämodialyse &amp; Hämodiafiltration (HDF):</strong> Nikkiso DBB-07 und Nikkiso DBB-EXA mit Hemo-Master</li>
          <li><strong>Fresenius BCM:</strong> Bioelektrische Blutvolumenmessung</li>
          <li>Vorbereitung &amp; Betreuung transplantierter Patienten &bull; Ernährungsberatung</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>Wohlfühlatmosphäre mit <strong>kostenlosem WLAN, TV &amp; Imbiss- und Getränkeservice</strong></li>
          <li>Enge Zusammenarbeit mit Haus- &amp; Fachärzten und umliegenden Krankenhäusern</li>
        </ul>
      </div>

      <!-- Öffnungszeiten -->
      <div class="section-card">
        <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-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>

    <!-- RIGHT COLUMN: Standorte, Kontakt & Anfahrt -->
    <div>
      <!-- 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">Zentrumsdialyse (Hauptpraxis &amp; Ambulanz)</div>
          <div class="loc-body">
            <strong>Thorner Straße 1 &bull; 12623 Berlin</strong> (16 Behandlungsplätze)<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: 1.2mm;">
          <div class="loc-head">Satellitendialyse</div>
          <div class="loc-body">
            <strong>Blumberger Damm 130 &bull; 12685 Berlin</strong> (18 Behandlungsplätze)<br>
            Eingang: Pritzhagener Weg 21
          </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 (Thorner Straße 1)
        </div>
        <div class="anfahrt-flex">
          <div class="anfahrt-text">
            <p><strong>ÖPNV:</strong> S-Bahn <strong>S5</strong> 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. / Wilhelmsmühlenweg in die Thorner Str. 1.</p>
            <p style="color: #0284c7; font-weight: 600;">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-Foto -->
      <div class="section-card" style="padding: 1.5mm;">
        <img src="file:///d:/web-repo2/img/gallery/praxis1.jpg" style="width: 100%; height: 25mm; object-fit: cover; border-radius: 4px;" alt="Praxis aussen">
      </div>
    </div>
  </div>

  <!-- Bottom Action Callout with BOTH Phone & Email prominently featured -->
  <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>Zentrale Rufnummer</small>
        <div class="channel-val">030 / 566 24 84</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; Dr. med. B. Bischoff &amp; Dr. med. J. Hoffzimmer</div>
    <div>E-Mail: kontakt@dialyse-berlin.net &bull; Web: www.dialyse-berlin.net</div>
    <div>Thorner Str. 1, 12623 Berlin &bull; Blumberger Damm 130, 12685 Berlin</div>
  </div>
</div>

</body>
</html>