/* zumausdrucken generators: form, preview and A4 print sheets. */
.zad-gen {
	--g-ink: var(--wp--preset--color--ink, #1D2340);
	--g-soft: var(--wp--preset--color--ink-soft, #4A5170);
	--g-line: var(--wp--preset--color--line, #DCE1E8);
	--g-paper: var(--wp--preset--color--paper, #fff);
	--g-ground: var(--wp--preset--color--ground, #EEF1F5);
	--g-hi: var(--wp--preset--color--highlight, #FFC845);
	--g-pink: var(--wp--preset--color--pink, #D63B6E);
	display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 28px 40px; align-items: start;
	background: var(--g-paper); border-radius: 20px; padding: clamp(18px, 3vw, 36px); margin-block: 2rem;
}
.zad-gen-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.zad-gen-head h2 { margin: 0; }
.zad-gen-intro { margin: 0; color: var(--g-soft); max-width: 62ch; }
.zad-gen-form { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; }
.zad-gen-field { display: flex; flex-direction: column; gap: 5px; font-size: 0.9375rem; }
.zad-gen-field > span { font-weight: 700; }
.zad-gen-field select, .zad-gen-field input, .zad-gen-field textarea {
	font: inherit; font-size: 1rem; padding: 10px 12px; border: 1.5px solid var(--g-line); border-radius: 10px;
	background: var(--g-paper); color: var(--g-ink); width: 100%; box-sizing: border-box;
}
.zad-gen-field textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }
.zad-gen-field select:focus-visible, .zad-gen-field input:focus-visible, .zad-gen-field textarea:focus-visible, .zad-gen-check input:focus-visible {
	outline: 3px solid var(--wp--preset--color--blue, #1F6FA8); outline-offset: 1px;
}
.zad-gen-ops { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.zad-gen-ops legend { font-weight: 700; font-size: 0.9375rem; padding: 0; margin-bottom: 6px; }
.zad-gen-check { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; cursor: pointer; }
.zad-gen-check input { width: 20px; height: 20px; accent-color: var(--g-ink); margin: 0; }
.zad-gen-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.zad-gen-actions .zad-btn { flex: 1 1 100%; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; }
.zad-gen-msg { margin: 0; font-size: 0.875rem; color: var(--g-soft); min-height: 1.3em; }
.zad-gen-msg.is-error { color: #B42318; font-weight: 600; }
.zad-gen-preview { background: var(--g-ground); border-radius: 14px; padding: 16px; max-height: 80vh; overflow: auto; min-width: 0; }
.zad-gen .zad-note { grid-column: 1 / -1; }
.zad-sheets { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.zad-a4-frame { position: relative; flex: none; width: 210mm; height: 297mm; }
.zad-a4-frame > .zad-a4 { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
#zad-print-root { display: none; }
.zad-gen [hidden] { display: none !important; }

/* ---------- A4 sheet ---------- */
.zad-a4 {
	--a-ink: #1D2340; --a-soft: #4A5170; --a-grey: #8A92A8; --a-line: #B9C0CF; --a-hi: #FFC845; --a-pink: #D63B6E;
	width: 210mm; height: 297mm; box-sizing: border-box; padding: 14mm 15mm 12mm; background: #fff; color: var(--a-ink);
	box-shadow: 0 8px 24px rgba(29,35,64,.12); display: flex; flex-direction: column; overflow: hidden; flex: none;
	font-family: var(--wp--preset--font-family--body, "Figtree", system-ui, sans-serif); font-size: 10.5pt; font-weight: 400; line-height: 1.35; letter-spacing: 0; text-align: left;
	-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.zad-a4-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm; }
.zad-a4-brand { display: flex; align-items: center; gap: 2mm; font-size: 7.5pt; font-weight: 600; color: var(--a-grey); }
.zad-a4-brand i { width: 9mm; height: 2.2mm; background: var(--a-hi); display: block; }
.zad-a4-name { display: flex; flex-direction: column; gap: 3mm; font-size: 9pt; color: var(--a-soft); width: 75mm; }
.zad-a4-name span { display: flex; gap: 2mm; align-items: flex-end; }
.zad-a4-name b { flex: 1; border-bottom: 0.25mm solid var(--a-line); height: 4mm; }
.zad-a4-title { font-family: var(--wp--preset--font-family--display, "Bricolage Grotesque", system-ui, sans-serif); font-weight: 800; font-size: 21pt; letter-spacing: -0.02em; line-height: 1.1; margin: 3mm 0 0; color: var(--a-ink); }
.zad-a4-sub { margin: 1.5mm 0 0; color: var(--a-soft); font-size: 10pt; }
.zad-a4-body { flex: 1; margin-top: 7mm; min-height: 0; }
.zad-a4-foot { display: flex; justify-content: space-between; font-size: 7.5pt; color: var(--a-grey); margin-top: 4mm; }
.zad-a4.is-xl { font-size: 13pt; }
.zad-a4.is-xl .zad-a4-sub { font-size: 12.5pt; }

/* Sudoku */
.zad-sd-list { display: grid; gap: 6mm 10mm; justify-items: center; }
.zad-sd-list.per-4, .zad-sd-list.per-6 { grid-template-columns: repeat(2, auto); justify-content: center; }
.zad-sd-list figure { margin: 0; display: flex; flex-direction: column; gap: 1.5mm; }
.zad-sd-list figcaption { font-weight: 700; font-size: 9pt; color: var(--a-soft); }
.zad-sd { display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); border: 0.6mm solid var(--a-ink); box-sizing: border-box; }
.zad-sd span { border-right: 0.2mm solid var(--a-line); border-bottom: 0.2mm solid var(--a-line); display: flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--display, system-ui, sans-serif); font-weight: 600; }
.zad-sd span.br { border-right: 0.6mm solid var(--a-ink); }
.zad-sd span.bb { border-bottom: 0.6mm solid var(--a-ink); }
.zad-sd em { font-style: normal; font-weight: 400; color: var(--a-pink); }

/* Rechnen */
.zad-calc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 6mm; }
.zad-calc li { display: flex; align-items: center; justify-content: flex-end; gap: 1.6mm; white-space: nowrap; padding-right: 4mm;
	font-family: var(--wp--preset--font-family--display, system-ui, sans-serif); font-weight: 600; }
.zad-calc b { font-weight: 600; min-width: 1ch; text-align: right; color: var(--a-ink); }
.zad-calc s { text-decoration: none; color: var(--a-soft); }
.zad-box { display: inline-flex; align-items: center; justify-content: center; border: 0.3mm solid var(--a-ink); border-radius: 1.2mm; font-style: normal; color: var(--a-pink); font-weight: 600; }
.zad-calc.is-big { row-gap: 9mm; font-size: 17pt; }
.zad-calc.is-big .zad-box { width: 17mm; height: 10mm; }
.zad-calc.is-mid { row-gap: 7.3mm; font-size: 14pt; }
.zad-calc.is-mid .zad-box { width: 14mm; height: 8.5mm; }
.zad-calc.is-small { row-gap: 4.2mm; font-size: 12pt; }
.zad-calc.is-small .zad-box { width: 13mm; height: 7mm; }
.zad-a4.is-xl .zad-calc.is-mid, .zad-a4.is-xl .zad-calc.is-small { font-size: 15pt; }
.zad-calc { padding-top: 2mm; }

/* Bingo */
.zad-bingo-list { display: grid; gap: 8mm 10mm; justify-content: center; }
.zad-bingo-list.per-4 { grid-template-columns: repeat(2, auto); }
.zad-bingo { display: flex; flex-direction: column; }
.zad-bingo-letters { display: grid; grid-template-columns: repeat(5, 1fr); border: 0.5mm solid var(--a-ink); border-bottom: 0; }
.zad-bingo-letters span { text-align: center; padding: 1.5mm 0; font-family: var(--wp--preset--font-family--display, system-ui, sans-serif); font-weight: 800; font-size: 17pt; }
.zad-bingo-letters .t0 { background: #FFE7A3; } .zad-bingo-letters .t1 { background: #D7E8F4; } .zad-bingo-letters .t2 { background: #DCEFE4; }
.zad-bingo-letters .t3 { background: #F7D3DF; } .zad-bingo-letters .t4 { background: #FBE0C8; }
.zad-bingo-title { text-align: center; padding: 1.5mm 0; background: #FFE7A3; border: 0.5mm solid var(--a-ink); border-bottom: 0; font-family: var(--wp--preset--font-family--display, system-ui, sans-serif); font-weight: 800; font-size: 15pt; letter-spacing: 0.04em; }
.zad-bingo-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-auto-rows: 1fr; border: 0.5mm solid var(--a-ink); box-sizing: border-box; }
.zad-bingo-grid span { border-right: 0.2mm solid var(--a-ink); border-bottom: 0.2mm solid var(--a-ink); display: flex; align-items: center; justify-content: center; text-align: center;
	font-family: var(--wp--preset--font-family--display, system-ui, sans-serif); font-weight: 600; font-size: 17pt; padding: 1mm; overflow: hidden; overflow-wrap: anywhere; line-height: 1.1; }
.zad-bingo.is-words .zad-bingo-grid span { font-family: var(--wp--preset--font-family--body, system-ui, sans-serif); font-weight: 600; font-size: 11pt; hyphens: auto; }
.zad-bingo-list.per-1 .zad-bingo-grid span { font-size: 30pt; } .zad-bingo-list.per-1 .is-words .zad-bingo-grid span { font-size: 17pt; }
.zad-bingo-list.per-4 .is-words .zad-bingo-grid span { font-size: 9pt; }
.zad-bingo-grid .free { font-family: var(--wp--preset--font-family--body, system-ui, sans-serif); font-size: 9pt !important; color: var(--a-soft); letter-spacing: 0.08em; }
.zad-bingo small { align-self: flex-end; font-size: 7.5pt; color: var(--a-grey); margin-top: 1mm; }
.zad-b90-list { display: flex; flex-direction: column; gap: 7mm; }
.zad-b90-list figure { margin: 0; }
.zad-b90 { width: 100%; border-collapse: collapse; table-layout: fixed; border: 0.5mm solid var(--a-ink); }
.zad-b90 td { height: 10mm; border: 0.2mm solid var(--a-ink); text-align: center; font-family: var(--wp--preset--font-family--display, system-ui, sans-serif); font-weight: 600; font-size: 15pt; }
.zad-b90 td.x { background: #EEF1F5; }
.zad-b90-list figcaption { text-align: right; font-size: 7.5pt; color: var(--a-grey); margin-top: 1mm; }
.zad-callgrid { display: grid; grid-template-columns: repeat(var(--c), 1fr); border-top: 0.2mm solid var(--a-line); border-left: 0.2mm solid var(--a-line); }
.zad-callgrid span { aspect-ratio: 1; border-right: 0.2mm solid var(--a-line); border-bottom: 0.2mm solid var(--a-line); display: flex; flex-direction: column; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--display, system-ui, sans-serif); font-weight: 600; font-size: 13pt; }
.zad-callgrid small { font-size: 6.5pt; color: var(--a-grey); line-height: 1; }

/* Buchstabensalat */
.zad-ws-wrap { display: flex; flex-direction: column; align-items: center; gap: 8mm; }
.zad-ws { display: grid; grid-template-columns: repeat(var(--n), 1fr); border: 0.4mm solid var(--a-ink); border-radius: 2mm; padding: 1.5mm; }
.zad-ws span { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-weight: 600; border-radius: 1mm; }
.zad-ws span.hit { background: var(--a-hi); }
.zad-wordlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6mm 8mm; width: 100%; }
.zad-wordlist li { display: flex; align-items: center; gap: 2.5mm; font-size: 11pt; }
.zad-wordlist li::before { content: ""; width: 3.6mm; height: 3.6mm; border: 0.3mm solid var(--a-ink); border-radius: 0.7mm; flex: none; }
.zad-wordlist.is-cols { grid-template-columns: repeat(3, 1fr); }
.zad-a4.is-xl .zad-wordlist li { font-size: 14pt; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.zad-gen { grid-template-columns: minmax(0, 1fr); }
	.zad-gen-form { position: static; }
	.zad-gen-preview { max-height: 70vh; padding: 10px; }
}

/* ---------- print ---------- */
@media print {
	@page { size: A4; margin: 0; }
	html, body.zad-printing { margin: 0 !important; padding: 0 !important; background: #fff !important; }
	body.zad-printing > *:not(#zad-print-root) { display: none !important; }
	body.zad-printing #zad-print-root { display: block !important; }
	#zad-print-root .zad-a4 { transform: none !important; position: static !important; box-shadow: none; margin: 0; break-after: page; page-break-after: always; }
	#zad-print-root .zad-a4:last-child { break-after: auto; page-break-after: auto; }
}