/* ------------------------------------------------------------------
   Schilder zum Ausdrucken.

   Weißer Hintergrund, wenig Farbe, damit wenig Tinte draufgeht.

   Trick für die Größen: Im Blatt wird alles in "em" gemessen.
   Die Schriftgröße des Blattes ist 4mm. Damit entspricht
   1em = 4mm und ein A4-Blatt ist 52.5em breit.
   Auf dem Bildschirm wird dieselbe Schriftgröße aus der Blattbreite
   berechnet, so sieht die Vorschau genauso aus wie der Ausdruck.
   ------------------------------------------------------------------ */

:root {
    --ink: #1a1a1a;
    --pumpkin: #ee7203;
    --pumpkin-face: #ffffff;
    --pumpkin-stem: #4c7a34;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: #e9e9ee;
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------- Leiste über dem Blatt (nur am Bildschirm) ---------------- */

.toolbar {
    max-width: 210mm;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: center;
}
.toolbar p {
    flex: 1 1 100%;
    margin: 0 0 .3rem;
    font-size: .95rem;
    color: #40465c;
}
/* Wie viele Aufkleber auf dem Blatt sind, mit den Knöpfen zum Ändern. */
.toolbar__anzahl {
    flex: 1 1 100%;
    margin: 0 0 .5rem !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}
.toolbar__anzahl a {
    min-height: 40px;
    padding: .4rem .9rem;
    font-size: .92rem;
}

/* Der Hinweis, dass auch etwas Selbstgemachtes zählt. */
.toolbar__eigenes {
    background: #fff;
    border-left: 4px solid var(--pumpkin);
    border-radius: 8px;
    padding: .6rem .8rem;
    margin-bottom: .6rem !important;
}
.toolbar a,
.toolbar button {
    min-height: 48px;
    padding: .7rem 1.2rem;
    border-radius: 12px;
    border: 2px solid #c7c9d6;
    background: #ffffff;
    color: #1a1a1a;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.toolbar .primary {
    background: var(--pumpkin);
    border-color: var(--pumpkin);
    color: #17110a;
}

/* ---------------- Das Blatt ---------------- */

.sheet-wrap {
    max-width: 210mm;
    margin: 0 auto 2rem;
    overflow-x: auto;
}

.sheet {
    width: 210mm;
    height: 297mm;
    font-size: 4mm;
    background: #ffffff;
    color: var(--ink);
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

/* Auf dem Bildschirm das Blatt auf die verfügbare Breite rechnen. */
@supports (width: 1cqw) {
    @media screen {
        .sheet-wrap { container-type: inline-size; }
        .sheet {
            width: 100cqw;
            height: calc(100cqw * 297 / 210);
            font-size: 1.9048cqw;
        }
    }
}

/* ---------------- Großes Schild (Einfamilienhaus) ---------------- */

.big {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 4em 3em;
    gap: 1em;
}
.big__pumpkin { width: 16em; height: 16em; }
.big__claim {
    font-size: 4.2em;
    font-weight: 800;
    line-height: 1.05;
    margin: .1em 0 .2em;
    letter-spacing: -0.01em;
}
.big__qr {
    width: 21em;
    height: 21em;
    padding: .6em;
    border: 0.15em solid var(--ink);
    border-radius: .6em;
}
.big__qr svg { width: 100%; height: 100%; display: block; }
.big__scan { font-size: 1.3em; margin: .2em 0 0; }
.big__title {
    font-size: 2.1em;
    font-weight: 700;
    margin: .1em 0 0;
}
.big__url { font-size: 1.15em; color: #4a4a4a; margin: .2em 0 0; word-break: break-all; }
.big__verein {
    position: absolute;
    left: 0; right: 0; bottom: 2em;
    text-align: center;
    font-size: 1.05em;
    color: #5a5a5a;
}

/* ---------------- Kleine Schilder (Mehrfamilienhaus) ---------------- */

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100%;
    width: 100%;
}

/* Gestrichelte Schnittlinien in der Mitte des Blattes */
.cut {
    position: absolute;
    border: 0;
    border-top: 0.1em dashed #9a9a9a;
    left: 0; right: 0; top: 50%;
    margin: 0;
}
.cut--v {
    border-top: 0;
    border-left: 0.1em dashed #9a9a9a;
    left: 50%; right: auto; top: 0; bottom: 0;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.6em 1.2em;
    gap: .35em;
    overflow: hidden;
}
.card__pumpkin { width: 5em; height: 5em; }
.card__claim {
    font-size: 1.85em;
    font-weight: 800;
    line-height: 1.1;
    margin: .1em 0;
}
/*
   Auf dem kleinen Schild stand einmal eine Linie zum Draufschreiben:
   "Bei ______ klingeln". Die ist weg. Auf der Karte stehen keine Namen,
   und dann soll auch unser eigenes Schild keinen Namen verlangen.
   Wer an der Klingel gefunden werden will, nimmt den Kürbis-Aufkleber.
*/
.card__qr {
    width: 11em;   /* 11em = 44mm, also mehr als 4 cm */
    height: 11em;
    padding: .25em;
    border: 0.1em solid var(--ink);
    border-radius: .3em;
}
.card__qr svg { width: 100%; height: 100%; display: block; }
.card__title { font-size: 1em; font-weight: 700; margin: .3em 0 0; }
.card__verein { font-size: .8em; color: #5a5a5a; margin: .1em 0 0; }

/* ---------------- Klingel-Aufkleber ---------------- */

/*
   Aufkleber zu je 30 mm in sechs Spalten.
   1em = 4mm, also ist ein Aufkleber 7.5em groß.
   6 x 7.5em = 45em breit, bei 52.5em Blattbreite bleiben links und rechts
   je 3.75em. Acht Zeilen passen auf ein Blatt, das sind 48 Stück.

   Die Zeilen entstehen nach Bedarf (grid-auto-rows), denn meistens werden
   nur vier gedruckt – ein Haushalt hat eine Klingel. Sie sammeln sich dann
   oben am Blatt (align-content: start) und nicht in der Mitte, das ist zum
   Ausschneiden angenehmer.
*/
.dots {
    display: grid;
    grid-template-columns: repeat(6, 7.5em);
    grid-auto-rows: 7.5em;
    justify-content: center;
    align-content: start;
    height: 100%;
    padding: 7.125em 3.75em;
}

.dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    border: 0.08em dashed #9a9a9a;
    border-radius: 50%;
}
/*
   Die Zeile muss in den Kreis passen, nicht nur in das Quadrat darum.
   Auf der Höhe der Schrift ist der Kreis schmaler als 30 mm.
   Nachgemessen: Schrift 21,7 mm breit, Kreis an dieser Stelle 27,5 mm.
   Wer die Schriftgröße erhöht, muss das neu nachrechnen.
*/
.dot__pumpkin { width: 3.6em; height: 3.6em; }
.dot__claim {
    font-size: .66em;
    font-weight: 800;
    line-height: 1.05;
    margin: .2em 0 0;
}

/* ---------------- Drucken ---------------- */

@page {
    size: A4 portrait;
    margin: 0;
}

@media print {
    body { background: #ffffff; }
    .toolbar { display: none !important; }
    .sheet-wrap { max-width: none; margin: 0; overflow: visible; }
    .sheet {
        width: 210mm;
        height: 297mm;
        font-size: 4mm;
        box-shadow: none;
        page-break-after: avoid;
        break-after: avoid;
    }
    .card, .big, .dot { break-inside: avoid; }
    /* Farben so drucken, wie sie am Bildschirm aussehen. */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}