/* public/aushang/aushang.css — drei Aushang-Vorlagen, druckfertig A4/A5.
   Unternehmensfarbe via --aushang-accent (gescopt, NICHT global). */
.aushang {
  --aushang-safe: 10mm;            /* Sicherheitszone: nichts Wichtiges näher an der Kante */
  --aushang-ink: #1c1c1c;
  position: relative;
  box-sizing: border-box;
  background: #fff;
  color: var(--aushang-ink);
  width: 210mm;                    /* A4-Standard; A5 überschreibt unten */
  aspect-ratio: 210 / 297;         /* Bildschirm-Vorschau hält A4-Proportion */
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.aushang--a5 { width: 148mm; aspect-ratio: 148 / 210; }

/* Kopf = Titel + Logo nebeneinander → Logo liegt immer auf ruhiger Fläche, nie über dem Foto. */
.aushang-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 5mm; }
.aushang-title { font-size: 34pt; font-weight: 800; line-height: 1.05; margin: 0; flex: 1; min-width: 0; }
.aushang--a5 .aushang-title { font-size: 24pt; }
.aushang-mwd { font-weight: 400; opacity: .55; font-size: .5em; }
.aushang-eckdaten { font-size: 13pt; opacity: .75; margin: 4mm 0 0; }
.aushang-beschreibung { font-size: 12pt; line-height: 1.45; margin: 5mm 0 0; }
.aushang--a5 .aushang-beschreibung { font-size: 10.5pt; }
/* margin-bottom hält immer einen Mindestabstand zum QR-Block (auch bei viel Inhalt). */
.aushang-highlights { list-style: none; padding: 0; margin: 6mm 0 6mm; font-size: 13pt; }
.aushang-abschluss { font-size: 12pt; line-height: 1.4; margin: 5mm 0 6mm; }
.aushang--a5 .aushang-abschluss { font-size: 10.5pt; }
/* A5 ist ~0,7× A4 → alle Textgrößen mitskalieren, sonst wirken Eckdaten/Highlights riesig. */
.aushang--a5 .aushang-eckdaten { font-size: 10.5pt; }
.aushang--a5 .aushang-highlights { font-size: 10.5pt; }
.aushang-highlights li { padding-left: 7mm; margin: 2mm 0; position: relative; }
.aushang-highlights li::before { content: "✓"; position: absolute; left: 0; color: var(--aushang-accent); font-weight: 800; }

.aushang-foto { background: #e9edf1; overflow: hidden; }
.aushang-foto-img { width: 100%; height: 100%; object-fit: cover; object-position: var(--aushang-foto-pos, 50% 50%); display: block; }
/* Logo als statisches Element im Kopf, rechts neben dem Titel. */
.aushang-logo { flex: none; max-height: 20mm; max-width: 52mm; object-fit: contain; }

.aushang-qr-block { display: flex; align-items: center; gap: 5mm; }
.aushang-qr { width: 30mm; height: 30mm; flex: none; background: #fff; border: 0.4mm solid var(--aushang-ink); box-sizing: border-box; padding: 2mm; }
.aushang-qr svg { width: 100%; height: 100%; display: block; }
.aushang--foto .aushang-qr { border-color: #fff; }
.aushang-cta-stark { font-weight: 800; font-size: 13pt; display: block; }
.aushang-cta-zeile { opacity: .8; font-size: 11pt; }
.aushang--a5 .aushang-cta-stark { font-size: 11pt; }
.aushang--a5 .aushang-cta-zeile { font-size: 9.5pt; }

/* ---- Vorlage A: Text-zuerst ---- */
.aushang--text { display: flex; flex-direction: column; padding: var(--aushang-safe); }
.aushang--text .aushang-foto { height: 48mm; margin: calc(-1 * var(--aushang-safe)) calc(-1 * var(--aushang-safe)) var(--aushang-safe); }
/* QR fließt direkt nach dem Inhalt (NICHT margin-top:auto an die Seitenkante geheftet) —
   sonst rutscht der Block im Druck bei der kleinsten Rundung auf eine zweite Seite. */
.aushang--text .aushang-qr-block { margin-top: 8mm; }

/* ---- Vorlage B: Foto-zuerst (Text auf Akzentfläche) ---- */
/* Akzent ist der Poster-Hintergrund; das Foto deckt die obere Zone ab.
   (Kein ::after mit z-index:-1 — das läge hinter dem weißen Basis-Hintergrund.) */
.aushang--foto { display: flex; flex-direction: column; background: var(--aushang-accent); }
.aushang--foto .aushang-foto { height: 40%; }
.aushang--foto .aushang-title,
.aushang--foto .aushang-eckdaten,
.aushang--foto .aushang-beschreibung,
.aushang--foto .aushang-highlights,
.aushang--foto .aushang-abschluss,
.aushang--foto .aushang-qr-block { color: #fff; }
.aushang--foto .aushang-highlights li::before { color: #fff; }
.aushang--foto > :not(.aushang-foto):not(.aushang-logo) { padding-left: var(--aushang-safe); padding-right: var(--aushang-safe); }
.aushang--foto .aushang-kopf { margin-top: var(--aushang-safe); }
.aushang--foto .aushang-qr-block { margin-top: 8mm; padding-bottom: var(--aushang-safe); }

/* ---- Vorlage C: Geteilt (Foto-Spalte links, Text rechts) ---- */
.aushang--geteilt { display: grid; grid-template-columns: 38% 1fr; }
.aushang--geteilt .aushang-foto { height: 100%; }
.aushang--geteilt > :not(.aushang-foto) { grid-column: 2; }
.aushang--geteilt { padding: 0; }
.aushang--geteilt .aushang-kopf { margin: var(--aushang-safe) var(--aushang-safe) 0; }
.aushang--geteilt .aushang-eckdaten,
.aushang--geteilt .aushang-beschreibung,
.aushang--geteilt .aushang-highlights,
.aushang--geteilt .aushang-qr-block { margin-left: var(--aushang-safe); margin-right: var(--aushang-safe); }

/* ---- Druck ----
   Das Poster wird im normalen Fluss gedruckt (kein position:fixed/absolute) —
   die umgebende Seite blendet ihr Bedien-Chrome aus und neutralisiert die
   Container-Kette (siehe AushangStudio.astro @media print), sodass das Poster
   oben links in echter mm-Größe sitzt. Hier nur die Seiten-Höhe + Schatten weg. */
@media print {
  /* Höhe minimal (0,5 px ≈ 0,13 mm) unter der echten Seitenhöhe: verhindert, dass ein
     mm→px-Rundungsrest das randlose Poster als Haaransatz auf eine 2. Seite kippt.
     break-inside/after: avoid hält das Poster zusätzlich als eine Einheit zusammen. */
  .aushang { height: calc(297mm - 0.5px); box-shadow: none; break-inside: avoid; break-after: avoid; }
  .aushang--a5 { height: calc(210mm - 0.5px); }
}