/* print.css - gebrandete A4-Aushang-Ansicht der Event-Detailseite (event.php).
 *
 * Zwei Welten:
 *  1) Bildschirm: .print-aushang ist KOMPLETT versteckt (nur Druck). Der
 *     "Als Aushang drucken"-Button (.ev-action) bleibt sichtbar.
 *  2) Druck (@media print): die normale Seite (Header/Footer/Nav/Karte/Buttons/
 *     Sidebar/ähnliche Termine) wird ausgeblendet, NUR der Aushang gedruckt.
 *
 * CI: Brand-Navy #01426a, Navy-Deep #002a47, Wappen-Gold #F5C518,
 * Display-Schrift Literata (--font-display).
 */

/* ---------------------------------------------------------------------------
 * 1) BILDSCHIRM: Aushang ausgeblendet (wird nur beim Drucken sichtbar)
 * ------------------------------------------------------------------------- */
.print-aushang { display: none; }

/* ---------------------------------------------------------------------------
 * 2) DRUCK
 * ------------------------------------------------------------------------- */
@media print {
  /* A4 Hochformat mit knappen Rändern (zusätzlich zu den Padding-Rändern
     im Aushang selbst). 12mm hält Inhalt außerhalb der Drucker-Sperrzone. */
  @page { size: A4 portrait; margin: 12mm; }

  /* Alles, was zur interaktiven Seite gehört, raus. Wir blenden grob den
     ganzen Site-Rahmen aus und holen nur den Aushang zurück. */
  body * { visibility: hidden; }
  .print-aushang, .print-aushang * { visibility: visible; }

  /* Bekannte interaktive/strukturelle Blöcke hart entfernen (visibility:hidden
     allein lässt noch Leerfläche/Umbrüche stehen). Der generische
     visibility-Reset oben fängt zusätzlich alles ab, was hier nicht gelistet
     ist (z. B. ein später ergänztes Cookie-Banner). */
  .site-header, .site-footer,
  .ev-back, .ev-hero, .ev-grid, .ev-similar, .ev-past,
  .skip-link, #ev-map, .ev-actions, .ev-aside, .ev-main {
    display: none !important;
  }

  /* Aushang als einziges Element, oben links verankert. Flex-Column über volle
     Blatthöhe, damit .pa-foot via margin-top:auto wirklich ans Blattende rückt
     (auf display:block wäre margin-top:auto wirkungslos). */
  .print-aushang {
    display: flex !important;
    flex-direction: column;
    min-height: calc(297mm - 24mm);
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #14233a;
    font-family: var(--font-body, 'Inter', Arial, sans-serif);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Browser-Standardränder (Datum/URL-Kopfzeile) lassen sich nur über
     @page steuern; Inhalt bleibt innerhalb der 12mm. */
  html, body { background: #fff !important; }

  /* --- Kopf: Navy-Band mit Logo + Gemeinde/Kategorie --- */
  .pa-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, #01426a 0%, #002a47 100%) !important;
    color: #fff !important;
    padding: 16px 22px;
    border-radius: 12px;
    border-bottom: 5px solid #F5C518 !important;
  }
  .pa-head__brand { display: flex; align-items: center; gap: 12px; }
  .pa-head__logo { height: 34px; width: auto; display: block; }
  .pa-head__kicker {
    font-size: 10pt;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #F5C518 !important;
    text-align: right;
    line-height: 1.4;
  }

  /* --- Titel + Kategorie-Pille --- */
  .pa-cat {
    display: inline-block;
    margin: 22px 0 10px;
    background: #F5C518 !important;
    color: #14233a !important;
    font-weight: 700;
    font-size: 11pt;
    padding: 5px 16px;
    border-radius: 999px;
  }
  .pa-title {
    font-family: var(--font-display, 'Literata', Georgia, serif);
    font-weight: 700;
    font-size: 30pt;
    line-height: 1.1;
    color: #01426a !important;
    margin: 0 0 18px;
  }

  /* --- Eckdaten (Datum/Zeit/Ort) groß + Veranstalter --- */
  .pa-facts {
    list-style: none;
    margin: 0 0 22px;
    padding: 18px 22px;
    border: 1.5px solid #d8e0ea;
    border-left: 6px solid #F5C518 !important;
    border-radius: 12px;
  }
  .pa-facts li { display: flex; gap: 14px; margin: 0 0 12px; align-items: baseline; }
  .pa-facts li:last-child { margin-bottom: 0; }
  .pa-facts .l {
    flex: 0 0 120px;
    font-size: 9.5pt;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5b6b7d !important;
  }
  .pa-facts .v { font-size: 14pt; font-weight: 700; color: #14233a !important; line-height: 1.35; }
  .pa-facts .v small { display: block; font-size: 11pt; font-weight: 400; color: #5b6b7d !important; }

  /* --- Beschreibung --- */
  .pa-desc-h {
    font-family: var(--font-display, 'Literata', Georgia, serif);
    font-size: 14pt;
    font-weight: 700;
    color: #01426a !important;
    margin: 0 0 8px;
  }
  .pa-desc {
    white-space: pre-line;
    font-size: 11.5pt;
    line-height: 1.55;
    color: #2c3a48 !important;
    margin: 0 0 22px;
    /* Beschreibung darf umbrechen, aber möglichst zusammenbleiben. */
    orphans: 3; widows: 3;
  }

  /* --- Fußbereich: QR + Aufruf --- */
  .pa-foot {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 2px solid #01426a !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .pa-qr {
    flex: 0 0 130px;
    width: 130px;
    height: 130px;
    border: 1.5px solid #d8e0ea;
    border-radius: 10px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff !important;
  }
  .pa-qr svg { width: 100%; height: 100%; display: block; }
  /* Platzhalter, falls QR (noch) nicht erzeugt wurde. */
  .pa-qr--placeholder {
    flex-direction: column;
    gap: 6px;
    color: #5b6b7d !important;
    font-size: 8pt;
    text-align: center;
    background: #f2f5f9 !important;
  }
  .pa-foot__txt { flex: 1; }
  .pa-foot__cta {
    font-family: var(--font-display, 'Literata', Georgia, serif);
    font-size: 13pt;
    font-weight: 700;
    color: #01426a !important;
    margin: 0 0 4px;
  }
  .pa-foot__url {
    font-size: 11pt;
    font-weight: 700;
    color: #14233a !important;
    word-break: break-all;
  }
  .pa-foot__brand {
    font-size: 9.5pt;
    color: #5b6b7d !important;
    margin-top: 6px;
  }
  .pa-foot__brand strong { color: #01426a !important; }

  /* Seitenumbrüche vermeiden, wo es weh tut. */
  .pa-head, .pa-title, .pa-facts, .pa-cat { page-break-inside: avoid; break-inside: avoid; }
}