/* ============================================
   Eckhütt Eins — Klausur-Flyer (gemeinsame Styles)
   Web-Ansicht + Druck (A4, eine Seite). Ein Gerüst für alle
   Programm-Flyer; die Stimme/Inhalt variiert je Programm.
   ============================================ */
.fl-wrap {
  --fl-petrol: var(--color-petrol-700, #2E5C66);
  --fl-gold: var(--color-gold-500, #b58a3e);
  --fl-ink: var(--color-ink, #2c2620);
  --fl-muted: var(--color-ink-muted, #6a6258);
  --fl-rule: var(--color-rule, #cfc4b1);
}
.fl-head { text-align: center; }
.fl-eyebrow { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--fl-gold); margin: 0; }
.fl-lead-zeile { font-family: var(--font-serif, "EB Garamond", serif); font-size: 1.5rem; font-weight: 600; color: var(--fl-petrol); margin: 0.4rem 0 0; }
.fl-intro { max-width: 62ch; margin: var(--space-5) auto 0; }
.fl-print { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: var(--space-5); background: none; border: 1px solid var(--fl-petrol); color: var(--fl-petrol); border-radius: 4px; padding: 0.55rem 1rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.fl-print:hover { background: rgba(46, 92, 102, 0.06); }
/* Auf dem Hero-Foto MUSS der Button klar lesbar sein: SOLIDE Petrol-Fuellung
   + weisse Schrift + goldener Rahmen. Solide (nicht transparent), damit der
   Text auch ueber hellen Foto-Stellen hohen Kontrast hat. */
.fl-wrap .hero .fl-print { border-color: var(--fl-gold); background: var(--fl-petrol); color: #fff; }
.fl-wrap .hero .fl-print:hover { background: #244a52; border-color: var(--fl-gold); }

.fl-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 760px) {
  .fl-grid--2 { grid-template-columns: 1fr 1fr; }
  .fl-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.fl-card { background: #fff; border: 1px solid var(--fl-rule); border-top: 4px solid var(--fl-petrol); border-radius: 4px; padding: 1.2rem 1.3rem; break-inside: avoid; }
.fl-card__role { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--fl-gold); margin: 0 0 0.2rem; }
.fl-card h3 { margin: 0 0 0.15rem; font-size: 1.15rem; }
.fl-card__owner { font-size: 0.92rem; color: var(--fl-muted); font-style: italic; margin: 0 0 0.6rem; }
.fl-card p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--fl-ink); }

.fl-case { margin-top: var(--space-6); background: var(--fl-petrol); color: #fff; border-radius: 6px; padding: 1.6rem 1.8rem; break-inside: avoid; }
.fl-case .fl-eyebrow { color: var(--color-gold-300, #e6c86e); }
.fl-case h2 { color: #fff; margin: 0.2rem 0 0.6rem; }
.fl-case p { margin: 0; color: #f3efe7; max-width: 72ch; }

.fl-note { margin-top: var(--space-4); font-size: 0.92rem; color: var(--fl-muted); }

/* QR block — verweist auf die volle Programm-Seite; horizontal & platzsparend */
.fl-wrap .fl-qr-block { display: inline-flex; align-items: center; gap: 0.9rem; margin-top: var(--space-4); text-align: left; break-inside: avoid; }
.fl-wrap .fl-qr { width: 92px; height: 92px; flex: 0 0 auto; background: #fff; padding: 6px; border-radius: 5px; border: 1px solid var(--fl-rule); }
.fl-wrap .fl-qr svg { width: 100%; height: 100%; display: block; }
.fl-wrap .fl-qr-text { display: flex; flex-direction: column; gap: 0.15rem; }
.fl-wrap .fl-qr-cap { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--fl-ink); }
.fl-wrap .fl-qr-url { margin: 0; font-size: 0.82rem; color: var(--fl-muted); }

.fl-checklist { list-style: none; margin: var(--space-4) 0 0; padding: 0; max-width: 66ch; }
.fl-checklist li { position: relative; padding: 0.45rem 0 0.45rem 1.4rem; border-bottom: 1px dashed var(--fl-rule); font-size: 0.98rem; line-height: 1.5; }
.fl-checklist li:last-child { border-bottom: none; }
.fl-checklist li::before { content: "\25B8"; color: var(--fl-gold); position: absolute; left: 0; top: 0.45rem; }

@media print {
  @page { size: A4; margin: 12mm; }
  .site-header, .site-footer, .nav__floating, [data-nav-floating], .fl-noprint { display: none !important; }
  body { background: #fff !important; }
  .fl-wrap .section { padding: 0.5rem 0 !important; }
  .fl-wrap { font-size: 10.5pt; }
  .fl-wrap, .fl-wrap * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .fl-wrap { font-size: 9.5pt; }
  .fl-wrap .section { padding: 0.3rem 0 !important; }
  .fl-wrap .section-header { margin-bottom: 0.4rem !important; }
  .fl-wrap h1 { font-size: 1.6rem; }
  .fl-wrap h2 { font-size: 1.25rem; }
  .fl-card, .fl-fmt, .fl-case, .fl-person { break-inside: avoid; }
  .fl-grid, .fl-fmt-grid, .fl-people__grid { gap: 0.7rem !important; }
  .fl-card, .fl-fmt { padding: 0.65rem 0.85rem !important; }
  .fl-case { padding: 0.9rem 1.1rem !important; }
  .fl-intro { margin-top: 0.5rem !important; }
  .fl-wrap .fl-qr-block { margin-top: 0.4rem !important; gap: 0.8rem; }
  .fl-wrap .fl-qr { width: 21mm; height: 21mm; padding: 4px; }
  .fl-wrap .fl-qr-cap { font-size: 0.86rem; }
  .fl-wrap .fl-qr-url { font-size: 0.78rem; }
  .fl-wrap .section { padding: 0.18rem 0 !important; }
  .fl-wrap .fl-checklist li { padding: 0.32rem 0 0.32rem 1.4rem; }
  .fl-wrap .fl-note { margin-top: 0.25rem !important; }
  .fl-wrap .fl-qr-block { margin-top: 0.25rem !important; }
  .fl-wrap .section { padding: 0.1rem 0 !important; }
  .fl-wrap .fl-case { padding: 0.55rem 0.9rem !important; }
}

/* fl-people */
.fl-people__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.3rem 1.6rem; margin-top: var(--space-4); }
.fl-person { flex: 0 1 200px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; break-inside: avoid; }
.fl-person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--fl-rule); }
.fl-person__name { margin: 0; font-weight: 600; font-size: 0.98rem; color: var(--fl-ink); }
.fl-person__role { margin: 0.1rem 0 0; font-size: 0.83rem; color: var(--fl-muted); line-height: 1.4; }
.fl-person__link { color: var(--fl-gold); text-decoration: none; }

/* fl-people-table */
.fl-people-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: var(--space-4); break-inside: avoid; }
.fl-people-table td { text-align: center; vertical-align: top; padding: 0.2rem 0.6rem; }
.fl-people-table img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--fl-rule); margin-inline: auto; }
.fl-pt-name { font-weight: 600; font-size: 0.95rem; color: var(--fl-ink); padding-top: 0.5rem !important; line-height: 1.3; }
.fl-pt-role { font-size: 0.82rem; color: var(--fl-muted); line-height: 1.4; }
.fl-pt-link a { font-size: 0.8rem; color: var(--fl-gold); text-decoration: none; }


@media print {
  /* Feinschliff: trailing-Orphan vermeiden, sauber auf moeglichst wenige Seiten */
  .fl-wrap { font-size: 9pt; }
  .fl-wrap .lead { font-size: 0.95rem !important; line-height: 1.42 !important; margin-top: 0.35rem !important; }
  .fl-wrap h2 { font-size: 1.18rem; }
  .fl-wrap .fl-note, .fl-wrap .fl-fmt-note, .fl-wrap .fl-case p, .fl-wrap .fl-intro { font-size: 0.88rem !important; }

  /* Die People-Tabelle bleibt als Block zusammen; die umgebende Section darf
     ueber die Seitengrenze fliessen, damit keine halbleere Seite entsteht. */
  .fl-people-table { break-inside: avoid; page-break-inside: avoid; }

  /* Letzte Verdichtung, damit der CTA-Abschluss noch auf Seite 2 passt. */
  .fl-wrap .fl-card { padding: 0.35rem 0.65rem !important; }
  .fl-wrap .fl-grid { gap: 0.4rem !important; margin-top: 0.45rem !important; }
  .fl-wrap .fl-card h3 { font-size: 1.02rem; margin-bottom: 0.1rem; }
  .fl-wrap .fl-card p { font-size: 0.86rem; line-height: 1.4; }
  .fl-wrap .fl-checklist li { padding-top: 0.32rem; padding-bottom: 0.32rem; }
  .fl-wrap .fl-people-table img { width: 46px; height: 46px; }
  .fl-wrap .fl-people-table td { padding: 0.15rem 0.5rem; }
}


/* ===== Flyer-Hero (Bildwelt wie Website) ===== */
.fl-wrap .hero { min-height: 54vh; border-radius: 0; }
.fl-wrap .hero__content { max-width: 680px; }
.fl-wrap .hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
@media print {
  .fl-wrap .hero { min-height: 33mm !important; break-inside: avoid; page-break-inside: avoid; }
  .fl-wrap .hero__content { padding: 0.7rem 1.6rem !important; }
  .fl-wrap .fl-case { margin-top: 0.6rem !important; }
  .fl-wrap .hero__eyebrow { margin-bottom: 0.5rem !important; font-size: 0.72rem !important; }
  .fl-wrap .hero h1 { font-size: 2rem !important; margin-bottom: 0.35rem !important; line-height: 1.08 !important; }
  .fl-wrap .hero__claim { font-size: 1.05rem !important; margin-top: 0.2rem !important; }
  .fl-wrap .hero__lead { font-size: 0.92rem !important; line-height: 1.45 !important; max-width: 60ch; }
}

.fl-card--soft { background: linear-gradient(180deg, rgba(181,138,62,0.10), rgba(181,138,62,0.03)); border-top-color: var(--fl-gold); }
.fl-card--soft .fl-card__role { color: var(--fl-petrol); }

/* ===== Download-/Druck-Aktionen ===== */
.fl-wrap .fl-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-5); }
.fl-wrap a.fl-print { text-decoration: none; }
.fl-wrap .fl-actions .fl-print { margin-top: 0; }
.fl-wrap .fl-print--primary { background: var(--fl-gold, #b58a3e); border-color: var(--fl-gold, #b58a3e); color: #1c1712; font-weight: 700; }
.fl-wrap .fl-print--primary:hover { background: #c99a3e; border-color: #c99a3e; }

/* ===== Mobil: Reflow-Absicherung ===== */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .fl-wrap .hero h1 { overflow-wrap: anywhere; }
  .fl-wrap h1, .fl-wrap h2, .fl-wrap p, .fl-wrap li { max-width: 100%; }
  .fl-wrap .fl-actions { flex-direction: column; }
  .fl-wrap .fl-actions .fl-print { width: 100%; text-align: center; justify-content: center; }
}