/*
 * Adresse für Kundinnen und Kunden: Abschnitt im Erscheinungsbild, Infobildschirm (Hochformat, aus 3 m
 * lesbar) und Aushang A4 zum Drucken.
 */
.customer-address {
    margin-top: var(--space-5);
}

.customer-address__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    gap: var(--space-5);
    align-items: start;
}

.customer-address__qr {
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    text-align: center;
}

.customer-address__code {
    padding: var(--space-2);
    background: #ffffff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    line-height: 0;
}

.customer-address__code svg {
    width: 180px;
    height: 180px;
}

.customer-address__short {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 48rem) {
    .customer-address__body {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Infobildschirm ---------------------------------------------------------------------- */
.info-screen-page {
    background: #0b1220;
}

.info-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 4vmin;
    color: #e6ebf3;
    font-family: var(--font);
    text-align: center;
}

.info-screen__back {
    position: fixed;
    top: 12px;
    left: 12px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
}

.info-screen__back:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

.info-screen__inner {
    display: grid;
    justify-items: center;
    gap: 3.5vmin;
    max-width: 92vmin;
}

.info-screen__org {
    display: inline-flex;
    align-items: center;
    gap: 2vmin;
    margin: 0;
    font-size: 4vmin;
    font-weight: 700;
}

.info-screen__logo {
    max-width: 50vmin;
    max-height: 10vmin;
    object-fit: contain;
    filter: brightness(0) invert(0.95);
}

.info-screen__mark {
    height: 8vmin;
    width: auto;
}

.info-screen__title {
    display: grid;
    gap: 1vmin;
    margin: 0;
    color: #ffffff;
    font-size: 7vmin;
    line-height: 1.1;
}

.info-screen__title span {
    color: #aab4c8;
    font-size: 0.5em;
    font-weight: 400;
}

.info-screen__qr {
    padding: 2.5vmin;
    border-radius: 2.5vmin;
    background: #ffffff;
    line-height: 0;
}

.info-screen__qr svg {
    width: 44vmin;
    height: 44vmin;
}

.info-screen__address {
    margin: 0;
    color: #ffffff;
    font-size: 6vmin;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.info-screen .info-screen__hint {
    margin: 0;
    color: #aab4c8;
    font-size: 3.4vmin;
}

@media (orientation: portrait) {
    .info-screen__qr svg {
        width: 64vmin;
        height: 64vmin;
    }

    .info-screen__title {
        font-size: 9vmin;
    }

    .info-screen__address {
        font-size: 7.2vmin;
    }

    .info-screen .info-screen__hint {
        font-size: 4.2vmin;
    }
}

/* ---- Aushang A4 (hoch) ------------------------------------------------------------------- */
.poster-page {
    background: var(--c-page);
}

.poster-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    max-width: 210mm;
    margin: var(--space-4) auto;
    padding: 0 var(--space-3);
}

.poster {
    box-sizing: border-box;
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    margin: 0 auto var(--space-6);
    padding: 18mm 16mm;
    background: #ffffff;
    color: #14213d;
    font-family: var(--font);
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 7mm;
    text-align: center;
    box-shadow: var(--shadow-card);
}

.poster__logo {
    max-width: 90mm;
    max-height: 26mm;
    object-fit: contain;
}

.poster__org {
    margin: 0;
    font-size: 22pt;
    font-weight: 700;
}

.poster__title {
    margin: 0;
    font-size: 40pt;
    line-height: 1.05;
}

.poster .poster__lead {
    margin: 0;
    font-size: 15pt;
}

.poster__qr {
    line-height: 0;
}

.poster__qr svg {
    width: 115mm;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
}

.poster__address {
    margin: 0;
    font-size: 26pt;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.poster__hours {
    width: 100%;
    text-align: left;
    border-top: 1px solid #c9d2e3;
    padding-top: 5mm;
}

.poster__hours h2 {
    margin: 0 0 3mm;
    font-size: 15pt;
}

.poster__hours dl {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 2mm 6mm;
    font-size: 12pt;
}

.poster__hours dt {
    font-weight: 700;
}

.poster__hours dt span {
    font-weight: 400;
}

.poster__hours dd {
    margin: 0;
}

.poster__foot {
    margin: auto 0 0;
    font-size: 11pt;
    color: #3b4658;
}

/* Ab drei (bzw. sechs) Standorten enger, damit der Aushang eine A4-Seite bleibt.
   Auf dem Telefon gelten die kleineren Größen weiter unten. */
@media print, (min-width: 40.01rem) {
    .poster--compact {
        gap: 5mm;
        padding: 14mm 16mm;
    }

    .poster--compact .poster__title {
        font-size: 34pt;
    }

    .poster--compact .poster__qr svg {
        width: 88mm;
    }

    .poster--compact .poster__hours dl {
        gap: 1.5mm 6mm;
        font-size: 10.5pt;
    }

    .poster--dense .poster__qr svg {
        width: 72mm;
    }

    .poster--dense .poster__hours dl {
        font-size: 9.5pt;
    }
}

/* Benannte Seite: nur der Aushang druckt A4 hoch ohne Rand. */
@page aushang {
    size: A4 portrait;
    margin: 0;
}

@media print {
    .poster-page {
        background: #ffffff;
    }

    .poster-tools {
        display: none;
    }

    .poster {
        page: aushang;
        margin: 0;
        box-shadow: none;
        width: 210mm;
        min-height: 296mm;
    }
}

@media (max-width: 40rem) {
    .poster {
        padding: 8mm 6mm;
    }

    .poster__title {
        font-size: 26pt;
    }

    .poster__address {
        font-size: 18pt;
    }

    .poster__hours dl {
        grid-template-columns: minmax(0, 1fr);
    }
}