/* Vereins-Aushang (aushang.js). Baut auf kostenrechner.css auf. Das Blatt ist echtes A4 (210 x 297 mm) und wird
   für die Vorschau verkleinert; beim Drucken steht nur das Blatt auf der Seite. Farbe des Vereins über --ah-farbe. */
.ah-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 40px; }
@media (max-width: 960px) { .ah-raster { grid-template-columns: minmax(0, 1fr); } }
.ah-felder { display: grid; gap: 14px; margin-top: 10px; }
.ah-felder label { display: grid; gap: 6px; font-size: 15px; font-weight: 600; }
.ah-felder input, .ah-felder textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--linie); border-radius: 8px; background: var(--papier);
  font: inherit; font-size: 17px; font-weight: 400; color: var(--text); resize: vertical; }
.ah-felder input:focus, .ah-felder textarea:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(224, 145, 90, .25); }
.ah-farben-titel { margin-top: 18px; font-size: 15px; font-weight: 600; }
.ah-farben { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ah-farben label { cursor: pointer; }
.ah-farben input { position: absolute; opacity: 0; }
.ah-farben span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--linie); border-radius: 8px; font-size: 15px; }
.ah-farben span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; }
.ah-farben .f1::before { background: #4B3427; } .ah-farben .f2::before { background: #2E5E4E; }
.ah-farben .f3::before { background: #24496B; } .ah-farben .f4::before { background: #8C2F39; }
.ah-farben input:checked + span { border-color: var(--gruen); background: var(--gruen-hell); font-weight: 700; }
.ah-farben input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.ah-haken { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 15px; cursor: pointer; }
.ah-haken input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--gold); }

/* Vorschau: A4 bei 96 dpi = 794 x 1123 px, verkleinert per Container-Breite */
.ah-vorschau { position: sticky; top: 96px; }
@media (max-width: 960px) { .ah-vorschau { position: static; } }
.ah-rahmen { width: 100%; aspect-ratio: 210 / 297; overflow: hidden; border-radius: 8px; box-shadow: 0 16px 40px -20px rgba(28, 23, 20, .45); background: #FFFFFF; }
.ah-blatt { --ah-farbe: #4B3427; width: 210mm; height: 297mm; transform-origin: top left;
  display: flex; flex-direction: column; background: #FFFFFF; color: #1C1714; font-family: "DM Sans", system-ui, sans-serif; }
.ah-kopf { padding: 16mm 18mm 12mm; background: var(--ah-farbe); color: #FFFFFF; font-size: 13mm; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.ah-inhalt { flex: 1; padding: 14mm 18mm 0; display: flex; flex-direction: column; gap: 7mm; }
.ah-inhalt h2 { font-size: 26mm; font-weight: 700; line-height: 1; letter-spacing: -.035em; color: var(--ah-farbe); }
.ah-text { font-size: 7mm; line-height: 1.4; }
.ah-marke { margin-bottom: 2mm; font-size: 4.2mm; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ah-farbe); }
.ah-termine ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2.5mm; }
.ah-termine li { padding-left: 7mm; position: relative; font-size: 7.4mm; font-weight: 600; line-height: 1.3; }
.ah-termine li::before { content: ""; position: absolute; left: 0; top: 2.6mm; width: 3.4mm; height: 3.4mm; border-radius: 50%; background: var(--ah-farbe); }
.ah-ort { font-size: 6.6mm; line-height: 1.35; }
.ah-hinweis { align-self: flex-start; padding: 3mm 6mm; border-radius: 3mm; background: var(--ah-farbe); color: #FFFFFF; font-size: 6.4mm; font-weight: 700; }
.ah-fuss { display: flex; gap: 10mm; align-items: center; margin: 10mm 18mm 0; padding: 10mm 0 8mm; border-top: .6mm solid #E7E2DA; }
.ah-qr { flex: none; width: 52mm; height: 52mm; padding: 3mm; border: .6mm solid #E7E2DA; border-radius: 3mm; }
.ah-qr img { display: block; width: 100%; height: 100%; }
.ah-fuss-text p { font-size: 6mm; line-height: 1.35; }
.ah-link { margin-top: 2mm; font-weight: 700; overflow-wrap: anywhere; }
.ah-kontakt { margin-top: 3mm; }
.ah-sb { padding: 0 18mm 7mm; font-size: 3.2mm; color: #8A817A; }
.ah [hidden] { display: none !important; }

.ah-teilen-titel { margin: 20px 0 -4px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze); }
.ah-leeren { border: 0; background: none; font: inherit; font-size: 15px; color: var(--leise); text-decoration: underline; cursor: pointer; }
.ah .kr-aktionen { align-items: center; }

@media print {
  @page { size: A4; margin: 0; }
  html, body { margin: 0; background: #FFFFFF; }
  .kopf, .fuss, .sprung, .ah-teilen-titel, .ah .kr-ueber, .ah h1, .ah .kr-lead, .ah .kr-formular, .ah .kr-aktionen, .ah .kr-hilfe, .ah .kr-erklaert { display: none !important; }
  .kr.ah { padding: 0; }
  .ah .huelle { max-width: none; padding: 0; }
  .ah-raster { display: block; margin: 0; }
  .ah-vorschau { position: static; }
  .ah-rahmen { width: 210mm; height: 297mm; aspect-ratio: auto; box-shadow: none; border-radius: 0; overflow: hidden; }
  .ah-blatt { transform: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}