/**
 * Französisch to go: gemeinsame Spruch-Karte (Design wie „Mein Spruch des Tages“)
 * Genutzt unter jedem Rezept und auf den Einzelseiten. Läuft das Video, wird das Bild groß (.ftgc-spielt).
 */
.ftgc { --c-ink: #34455c; --c-soft: #66768c; --c-rouge: #c8423d; --c-cream: #f4ece0;
    container-type: inline-size; color: var(--c-ink); }
.ftgc * { box-sizing: border-box; }
.ftgc-karte { display: grid; grid-template-columns: 160px 1fr; gap: 22px; align-items: center;
    background: var(--c-cream); border-radius: 16px; padding: 18px; }
.ftgc-media .ftg-video-wrap { border-radius: 10px; max-height: none; background: #000; }
.ftgc-media .ftg-lazy-poster { object-position: 50% 30%; }
.ftgc-media .ftg-badge { display: none; }
.ftgc-media .ftg-play-btn svg { width: 46px; height: 46px; }
.ftgc-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ftgc-tag { font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: var(--c-rouge); font-size: 1.05rem; line-height: 1.3; }
.ftgc-fr { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 700; font-size: clamp(1.4rem, 4.5cqw, 2.1rem); line-height: 1.12; margin: 2px 0; }
.ftgc-wort { color: var(--c-soft); font-size: 1rem; line-height: 1.4; }
.ftgc-kurz { margin-top: 6px; background: #e2f2e8; border-radius: 10px; padding: 8px 12px; font-weight: 600; line-height: 1.4; }
.ftgc-kurz[hidden] { display: none; }
.ftgc-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ftgc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--c-ink) !important;
    background: transparent !important; color: var(--c-ink) !important; border-radius: 999px !important; padding: 8px 16px !important;
    font-weight: 700 !important; font-size: .9rem !important; line-height: 1.2 !important; text-decoration: none !important;
    text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; margin: 0 !important; cursor: pointer; font-family: inherit; }
.ftgc-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.ftgc-btn.ftgc-red { background: var(--c-rouge) !important; border-color: var(--c-rouge) !important; color: #fff !important; }
.ftgc-btn.ftgc-red svg { fill: currentColor; stroke: none; }
.ftgc-btn.ftgc-teilen { background: #2f6f8f !important; border-color: #2f6f8f !important; color: #fff !important; }
.ftgc-btn[data-ftgc-herz][aria-pressed="true"], .ftgc-btn.ftgc-on { background: var(--c-rouge) !important; border-color: var(--c-rouge) !important; color: #fff !important; }
.ftgc-btn[data-ftgc-herz][aria-pressed="true"] svg, .ftgc-btn.ftgc-on svg { fill: currentColor; }
.ftgc-btn.ftgc-pop svg { animation: ftgc-pop .45s ease; }
@keyframes ftgc-pop { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
.ftgc-btn[hidden] { display: none !important; }

/* Video läuft: Bild groß */
.ftgc-spielt .ftgc-karte { grid-template-columns: 300px 1fr; align-items: start; }

/* Leiste mit weiteren Sprüchen (spielt direkt in der Karte) */
.ftgc-mehr { margin: 18px 0 8px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--c-soft); }
.ftgc-leiste { display: grid; grid-auto-flow: column; grid-auto-columns: 124px; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ftgc-kachel { position: relative; display: block; aspect-ratio: 9/14; border-radius: 10px; overflow: hidden; scroll-snap-align: start;
    border: 0 !important; padding: 0 !important; margin: 0 !important; background: #ddd !important; cursor: pointer; box-shadow: none !important; text-align: left; }
.ftgc-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; }
.ftgc-kachel .ftgc-k-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 8px 8px; background: linear-gradient(to top, rgba(18,24,32,.88), rgba(18,24,32,0));
    color: #fff; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 700; font-size: .86rem; line-height: 1.15; }
.ftgc-kachel.ftgc-aktiv { outline: 3px solid var(--c-rouge); outline-offset: -3px; }
.ftgc-play { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0,0,0,.45); display: grid; place-items: center; pointer-events: none; }
.ftgc-play svg { width: 16px; height: 16px; fill: #fff; margin-left: 3px; }
@media (hover: hover) and (pointer: fine) {
    .ftgc-leiste { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }
}

/* Handy: Bild links neben Spruch, Knöpfe in voller Breite darunter (wie Spruch des Tages) */
@container (max-width: 560px) {
    .ftgc-karte { grid-template-columns: 96px 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 4px; padding: 14px;
        grid-template-areas: "bild tag" "bild fr" "bild wort" "kurz kurz" "acts acts" "reihe1 reihe1" "reihe2 reihe2"; align-items: start; }
    .ftgc-text { display: contents; }
    .ftgc-media { grid-area: bild; }
    .ftgc-tag { grid-area: tag; font-size: .95rem; }
    .ftgc-fr { grid-area: fr; font-size: 1.4rem; margin: 0; }
    .ftgc-wort { grid-area: wort; font-size: .9rem; }
    .ftgc-kurz { grid-area: kurz; }
    .ftgc-acts { grid-area: acts; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
    .ftgc-acts .ftgc-btn { padding: 8px 10px !important; font-size: .84rem !important; }
    .ftgc-acts .ftgc-red { grid-column: 1 / -1; }
    .ftgc-reihe1 { grid-area: reihe1; }
    .ftgc-reihe2 { grid-area: reihe2; }
    .ftgc-media .ftg-play-btn svg { width: 34px; height: 34px; }
    /* Video läuft: Bild über die ganze Breite */
    .ftgc-spielt .ftgc-karte { grid-template-columns: 1fr; grid-template-rows: none;
        grid-template-areas: "bild" "tag" "fr" "wort" "kurz" "acts" "reihe1" "reihe2"; }
    .ftgc-spielt .ftgc-media .ftg-video-wrap { width: min(100%, calc(72vh * 9 / 16)); margin: 0 auto 6px; }
}
@media (prefers-reduced-motion: reduce) { .ftgc * , .ftgc-karte { animation: none !important; transition: none !important; } }