<div style="display:flex; flex-direction: row; align-items: start; justify-content:space-between">
    <div
        style=" display: flex; flex-direction:column; text-align: center;  align-items: center; justify-content: center; width:100%;">
        {{#if title}}<h3 style="font-size: 20px;">{{title}}</h3>{{/if}}
        {{#if table_title}}<h3 style="text-align: center; font-size: 18px;">{{table_title}}</h3>{{/if}}
        <p>{{formatDate 0 format="dd.mm.yy / hh:mi"}}</p>
    </div>
    <div class="qr-wrapper" style=" width:180px; height:180px;">{{{qr}}}</div>
</div>
<div class="print-map">
    {{{printMap}}}
</div>

{{#each rows}}
<div style="margin-bottom:30px">
    <h3>{{title}}</h3>
    <div>{{{html}}}</div>
</div>
{{/each}}
<div style="margin-top: 50px;">
    <hr />
    <div style="word-break: break-all;">{{{url}}}</div>

</div>

<style>
    .no-print {
        display: none !important;
    }

    .print-map img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .print-map {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
    }

    * {
        margin: 0;
        padding: 5;
        box-sizing: border-box;
    }

    body {
        font-family:
            Arial, sans-serif;
        font-size: 14px;
        color: #333;
        line-height: 1.5;
        background-color: #fff;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th,
    td {
        border: 1px solid #9b9a9a;
        padding: 8px;
        text-align: left;
    }


    h1,
    h2,
    h3 {
        font-weight: bold;
        margin-bottom: 15px;
        color: #000;
    }

    h2 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    h3 {
        font-size:
            18px;
        margin-bottom: 10px;
    }

    div.font-semibold {
        margin-bottom: 15px;
        color:
            #000000;
        font-size: 16px;
    }

    hr {
        border: none;
        border-top: 1px solid #ddd;
        margin: 15px 0;
    }

    dl {
        margin: 10px 0 25px;
        width: 100%;
    }

    dl>div {
        display:
            flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 0;
        border-bottom:
            1px solid #ddd;
    }

    dt {
        font-weight: 400;
        color: #111827;
        width: 50%;
        min-width: 150px;
        padding-right: 10px;
    }

    dd {
        flex: 1;
        color: #374151;
    }

    div.bg-gray-200.text-center.p-6.rounded-xl h3 {
        color: #374151;
        font-weight: 400;
        font-size: 14px;
    }

    button {
        display: none;
    }

    a {
        color: #374151;
        text-decoration: none;
        transition: color 0.3s;
    }

    ul {
        list-style: none;
        margin: 10px 0;
        padding-left:
            20px;
    }

    li {
        margin-bottom: 5px;
        color: #374151;
        font-size: 16px;
    }

    button {
        padding: 8px 12px;
        font-size: 14px;
        font-weight: 600;
        border: none;
        border-radius: 4px;
    }

    .qr-wrapper img {
        width: 100%;
        object-fit: cover;
    }

    .text-sm {
        font-size: 14px;
    }

    .text-gray-700 {
        color:
            #4a5568;
    }

    .text-gray-900 {
        color: #1a202c;
    }

    .font-semibold {
        font-weight:
            600;
    }

    .rounded-md {
        border-radius: 6px;
    }

    .gap-4 {
        gap: 16px;
    }

    .grid {
        display: grid;
        gap: 16px;
    }

    .grid-cols-1 {
        grid-template-columns: 1fr;
    }

    .sm\\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .sm\\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .divide-y>div:not(:last-child) {
        border-bottom: 1px solid #ddd;
    }

    .flex {
        display: flex;
        align-items: center;
    }

    .justify-between {
        justify-content: space-between;
    }

    .justify-center {
        justify-content: center;
    }

    .border-b {
        border-bottom: 1px solid #ddd;
    }

    .pb-\\[15px\\] {
        padding-bottom: 15px;
    }

    .pt-\\[30px\\] {
        padding-top: 30px;
    }
</style>