/**
 * Französisch to go: Reiter „Meine Sprüche" in „Mein Kochbuch" + Druckformate.
 * Druckblätter in cqw, damit dieselbe Vorlage als Vorschau und als A4-Seite passt.
 * Gedrucktes Papier ist weiß: Farben hier bewusst fest.
 */
.ftgk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 1rem 0 2rem; }
.ftgk-karte { position: relative; display: flex; flex-direction: column; gap: 8px; }
.ftgk-bild { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 9/14; background: #f4ece0; }
.ftgk-bild img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; }
.ftgk-herz { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50% !important; border: 0 !important; padding: 0 !important; margin: 0 !important; background: rgba(255,255,255,.94) !important; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.18) !important; cursor: pointer; }
.ftgk-herz svg { width: 19px; height: 19px; fill: #c8423d; }
.ftgk-text { display: flex; flex-direction: column; gap: 2px; }
.ftgk-titel { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 700; line-height: 1.2; color: #34455c !important; text-decoration: none !important; }
.ftgk-kurz { font-size: .86rem; color: #66768c; line-height: 1.35; }
.ftgk-leer { padding: 1rem 0 2rem; }
.ftgk-chip small { opacity: .75; }

.ftgk-druck { border-top: 1px solid #e6dccb; padding-top: 1.2rem; margin-bottom: 2rem; }
.ftgk-druck h3 { margin: 0 0 .3rem !important; }
.ftgk-formate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: .8rem 0; }
@media (max-width: 640px) { .ftgk-formate { grid-template-columns: repeat(2, 1fr); } }
.ftgk-fmt { border: 1.5px solid #e6dccb !important; background: #fff !important; border-radius: 12px !important; padding: 10px !important; text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer; color: #34455c !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; margin: 0 !important; line-height: 1.3 !important; font-weight: 400 !important; }
.ftgk-fmt b { font-size: .92rem; }
.ftgk-fmt small { color: #66768c; font-size: .76rem; line-height: 1.3; }
.ftgk-fmt[aria-pressed="true"] { border-color: #c8423d !important; background: #f6dedc !important; }
.ftgk-vorschau { background: #8d96a3; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ftgk-vorschau .ftgk-a4 { width: 100%; max-width: 440px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.ftgk-pager { display: flex; gap: 10px; align-items: center; color: #fff; font-weight: 600; font-size: .88rem; }
.ftgk-pager button { border: 0 !important; background: rgba(255,255,255,.22) !important; color: #fff !important; border-radius: 8px !important; padding: 4px 12px !important; margin: 0 !important; box-shadow: none !important; cursor: pointer; }
.ftgk-pager button:disabled { opacity: .4; cursor: default; }
.ftgk-drucken { margin-top: 12px; }

.ftgk-toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 100001; background: #34455c; color: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 600; font-size: .9rem; display: flex; gap: 14px; align-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.2); max-width: calc(100% - 32px); }
.ftgk-toast[hidden] { display: none; }
.ftgk-toast button { border: 0 !important; background: none !important; color: #fff !important; text-decoration: underline; font-weight: 700 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; cursor: pointer; }

/* ---------- A4-Blatt ---------- */
.ftgk-a4 { aspect-ratio: 210/297; background: #fff; color: #34455c; container-type: inline-size; position: relative; overflow: hidden; font-family: 'Open Sans', Arial, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ftgk-a4 * { box-sizing: border-box; }
.ftgk-f, .ftgk-ph b { font-family: 'Playfair Display', Georgia, serif; }
.ftgk-pad { position: absolute; inset: 6cqw; display: flex; flex-direction: column; gap: 2.2cqw; }
.ftgk-ph { display: flex; justify-content: space-between; align-items: baseline; border-bottom: .3cqw solid #34455c; padding-bottom: 1.5cqw; }
.ftgk-ph b { font-size: 5cqw; }
.ftgk-ph b em { color: #c8423d; }
.ftgk-ph span { font-size: 2.2cqw; color: #66768c; }
.ftgk-pf { margin-top: auto; font-size: 2cqw; color: #66768c; display: flex; justify-content: space-between; border-top: .2cqw solid #e6dccb; padding-top: 1.2cqw; }
.ftgk-srow { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; border-bottom: .2cqw dashed #e6dccb; padding-bottom: 1.6cqw; }
.ftgk-srow .ftgk-f { font-style: italic; font-weight: 700; font-size: 3.1cqw; line-height: 1.15; }
.ftgk-srow .ftgk-w { font-size: 2.2cqw; color: #66768c; }
.ftgk-srow .ftgk-k { font-size: 2.5cqw; }

.ftgk-cards4 { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ftgk-pc { border: .25cqw dashed #b9c0ca; margin: -.125cqw; padding: 6cqw 5cqw 5cqw; display: flex; flex-direction: column; gap: 2cqw; overflow: hidden; }
.ftgk-pc .ftgk-foto { width: 100%; height: 40%; object-fit: cover; object-position: 50% 30%; border-radius: 1.5cqw; display: block; margin: 0 !important; }
.ftgk-n { font-size: 1.8cqw; letter-spacing: .15em; text-transform: uppercase; color: #c8423d; font-weight: 700; }
.ftgk-pc .ftgk-f { font-style: italic; font-weight: 700; font-size: 4.6cqw; line-height: 1.1; margin-top: 1cqw; }
.ftgk-pc .ftgk-w { font-size: 2.3cqw; color: #66768c; }
.ftgk-pc .ftgk-k { font-size: 2.7cqw; font-weight: 600; border-top: .2cqw solid #e6dccb; padding-top: 2cqw; }
.ftgk-qr { margin-top: auto; display: flex; align-items: center; gap: 2cqw; font-size: 1.8cqw; color: #66768c; }
.ftgk-qrbox { width: 11cqw; height: 11cqw; flex: none; background: #fff; }
/* Die QR-Bibliothek schaltet selbst zwischen canvas und img um (Inline-Stil), daher hier kein display */
.ftgk-qrbox img, .ftgk-qrbox canvas { width: 100% !important; height: 100% !important; margin: 0 !important; }

.ftgk-foldhint { position: absolute; top: .6cqw; left: 50%; transform: translateX(-50%); font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 2.2cqw; color: #c8423d; background: #fff; padding: 0 1cqw; z-index: 1; }
.ftgk-fold { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(5, 1fr); }
.ftgk-fr2 { display: grid; grid-template-columns: 1fr 1fr; border-bottom: .25cqw dashed #b9c0ca; }
.ftgk-fr2 > div { padding: 3cqw 4cqw; display: flex; flex-direction: column; justify-content: center; gap: 1cqw; text-align: center; }
.ftgk-fr2 > div:first-child { border-right: .3cqw dotted #c8423d; }
.ftgk-fr2 .ftgk-f { font-style: italic; font-weight: 700; font-size: 3.4cqw; line-height: 1.12; }
.ftgk-fr2 .ftgk-k { font-size: 2.6cqw; font-weight: 700; }
.ftgk-fr2 .ftgk-w { font-size: 2.1cqw; color: #66768c; }
.ftgk-fr2 .ftgk-n { font-size: 1.7cqw; }

.ftgk-poster { position: absolute; inset: 6cqw; border: .7cqw solid #c8423d; display: flex; flex-direction: column; }
.ftgk-poster .ftgk-foto { width: 100%; height: 50%; object-fit: cover; object-position: 50% 28%; display: block; margin: 0 !important; }
.ftgk-t { padding: 9cqw 8cqw; display: flex; flex-direction: column; gap: 3.2cqw; flex: 1; }
.ftgk-e { font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: #c8423d; font-size: 4.4cqw; }
.ftgk-t .ftgk-f { font-style: italic; font-weight: 700; font-size: 10cqw; line-height: 1.06; margin-top: 3cqw; }
.ftgk-t .ftgk-w { font-size: 4.2cqw; color: #66768c; }
.ftgk-t .ftgk-k { font-size: 5cqw; font-weight: 600; border-top: .3cqw solid #e6dccb; padding-top: 3.5cqw; }
.ftgk-t .ftgk-b { font-size: 4cqw; font-style: italic; color: #66768c; }
.ftgk-poster .ftgk-qrbox { width: 19cqw; height: 19cqw; }
.ftgk-poster .ftgk-qr { font-size: 3.2cqw; gap: 4cqw; }

/* ---------- Druck ---------- */
#ftgk-print { display: none; }
@media print {
    body.ftgk-drucken > *:not(#ftgk-print) { display: none !important; }
    body.ftgk-drucken #ftgk-print { display: block; }
    body.ftgk-drucken { margin: 0 !important; padding: 0 !important; background: #fff !important; }
    #ftgk-print .ftgk-a4 { width: 210mm; height: 296mm; aspect-ratio: auto; page-break-after: always; break-after: page; }
    #ftgk-print .ftgk-a4:last-child { page-break-after: auto; break-after: auto; }
    #ftgk-print .ftgk-a4-poster { width: 148mm; height: 209mm; }
}

/* Lange Sprüche (z. B. zwei Redewendungen) kleiner setzen, damit nichts aus dem Rahmen läuft */
.ftgk-poster, .ftgk-pc { overflow: hidden; }
.ftgk-t { min-height: 0; }
.ftgk-poster.ftgk-mittel .ftgk-t .ftgk-f { font-size: 8.2cqw; }
.ftgk-poster.ftgk-lang .ftgk-t .ftgk-f { font-size: 6.4cqw; }
.ftgk-poster.ftgk-lang .ftgk-t { gap: 2.4cqw; padding-top: 7cqw; }
.ftgk-poster.ftgk-lang .ftgk-t .ftgk-b, .ftgk-poster.ftgk-mittel .ftgk-t .ftgk-b { font-size: 3.4cqw; }
.ftgk-pc.ftgk-mittel .ftgk-f { font-size: 3.8cqw; }
.ftgk-pc.ftgk-lang .ftgk-f { font-size: 3.1cqw; }

/* Meldung: volle Textbreite statt halber Bildschirmbreite (left: 50% begrenzt sonst die Breite), Theme-Zeilenabstand aus */
.ftgk-toast { width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; line-height: 1.35 !important; font-size: .92rem !important; padding: 11px 18px; border-radius: 14px; }
.ftgk-toast span, .ftgk-toast a, .ftgk-toast button { line-height: 1.35 !important; font-size: .92rem !important; white-space: normal; }
.ftgk-toast a, .ftgk-toast button { white-space: nowrap; flex: none; }