/**
 * Französisch to go: neue Übersichtsseite (Vorschau, nur eingeloggt oder ?ftg_neu=1)
 * Alles unter .ftgn, damit nichts in Theme oder alte Seite durchschlägt.
 */
.ftgn, #ftgn-print, .ftgn-layer, .ftgn-toast {
    --ftgn-ink: #34455c;
    --ftgn-soft: #66768c;
    --ftgn-rouge: #c8423d;
    --ftgn-rouge-soft: #f6dedc;
    --ftgn-line: #e6dccb;
    --ftgn-cream: #f4ece0;
    --ftgn-paper: #fbf8f3;
    --ftgn-card: #ffffff;
    --ftgn-mark: #fde7a9;
    --ftgn-ok: #2f7a4f;
    --ftgn-ok-bg: #e2f2e8;
    --ftgn-shadow: 0 1px 2px rgba(52,69,92,.08), 0 6px 18px rgba(52,69,92,.1);
    --ftgn-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
.ftgn { container-type: inline-size; color: var(--ftgn-ink); margin: 1.5rem 0 2.5rem; }
.ftgn *, .ftgn-layer *, #ftgn-print * { box-sizing: border-box; }
.ftgn button, .ftgn-layer button { font: inherit; color: inherit; cursor: pointer; }
.ftgn p, .ftgn-layer p { margin: 0; }
.ftgn :focus-visible, .ftgn-layer :focus-visible { outline: 2px solid var(--ftgn-rouge); outline-offset: 2px; }
.ftgn-soft { color: var(--ftgn-soft); }
.ftgn-lead { font-size: 1.1em; }

/* Knöpfe */
.ftgn-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--ftgn-ink) !important; background: var(--ftgn-ink) !important; color: #fff !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; }
.ftgn-btn svg { width: 16px; height: 16px; flex: none; }
.ftgn-btn.ftgn-ghost { background: transparent !important; color: var(--ftgn-ink) !important; }
.ftgn-btn.ftgn-red, .ftgn-btn.ftgn-on { background: var(--ftgn-rouge) !important; border-color: var(--ftgn-rouge) !important; color: #fff !important; }
.ftgn-link { border: 0 !important; background: none !important; padding: 0 !important; color: var(--ftgn-rouge) !important; font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: 5px; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; }
.ftgn-link svg { width: 14px; height: 14px; }

/* Spruch des Tages */
.ftgn-daily { display: grid; grid-template-columns: 160px 1fr; gap: 22px; background: var(--ftgn-cream); border-radius: 16px; padding: 18px; align-items: center; }
.ftgn-daily-img { border: 0 !important; padding: 0 !important; background: none !important; border-radius: 10px; overflow: hidden; display: block; }
.ftgn-daily-img img { width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; margin: 0 !important; }
.ftgn-daily-tag { font-family: var(--ftgn-display); font-style: italic; color: var(--ftgn-rouge); font-size: 1.05rem; }
.ftgn-daily-fr { font-family: var(--ftgn-display); font-style: italic; font-weight: 700; font-size: clamp(1.4rem, 4.5cqw, 2.1rem); line-height: 1.12; margin: 6px 0 4px; }
.ftgn-daily-wort { color: var(--ftgn-soft); }
.ftgn-daily-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ftgn-daily.ftgn-spin .ftgn-daily-fr, .ftgn-daily.ftgn-spin img { animation: ftgn-spin .12s linear infinite alternate; }
@keyframes ftgn-spin { from { opacity: 1; transform: translateY(0); } to { opacity: .35; transform: translateY(-4px); } }

/* Sammelheft */
.ftgn-collect { margin-top: 16px; display: grid; gap: 8px; font-size: .92rem; }
.ftgn-collect-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ftgn-bar { height: 8px; background: var(--ftgn-cream); border-radius: 99px; overflow: hidden; }
.ftgn-bar i { display: block; height: 100%; width: 0; background: var(--ftgn-rouge); border-radius: 99px; transition: width .4s ease; }




/* Suche + Filter */
.ftgn-searchbar { margin-top: 22px; position: sticky; top: var(--ftgn-top, 0px); z-index: 30; background: #fff; padding: 10px 0; }
.ftgn-sfield { position: relative; }
.ftgn-sfield svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; stroke: var(--ftgn-soft); fill: none; pointer-events: none; }
.ftgn-sfield input[type=search] { width: 100% !important; border: 2px solid var(--ftgn-line) !important; border-radius: 999px !important; padding: 12px 44px 12px 48px !important; background: var(--ftgn-paper) !important; font-size: 1rem !important; height: auto !important; margin: 0 !important; box-shadow: none !important; color: var(--ftgn-ink) !important; -webkit-appearance: none; appearance: none; }
.ftgn-sfield input[type=search]:focus { border-color: var(--ftgn-ink) !important; background: #fff !important; outline: none; }
.ftgn-sfield input::-webkit-search-cancel-button { display: none; }
.ftgn-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0 !important; background: var(--ftgn-cream) !important; border-radius: 50% !important; width: 30px; height: 30px; padding: 0 !important; display: grid; place-items: center; font-size: 1.1rem; line-height: 1; color: var(--ftgn-ink) !important; }
.ftgn-clear[hidden] { display: none; }
.ftgn-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 0 2px; -webkit-overflow-scrolling: touch; }
.ftgn-chips::-webkit-scrollbar { display: none; }
.ftgn-chip-lbl { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ftgn-soft); font-weight: 700; white-space: nowrap; align-self: center; margin-right: 4px; }
.ftgn-chip { border: 1px solid var(--ftgn-line) !important; background: #fff !important; border-radius: 999px !important; padding: 5px 12px !important; font-size: .85rem !important; white-space: nowrap; font-weight: 600 !important; color: var(--ftgn-ink) !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; margin: 0 !important; line-height: 1.4 !important; }
.ftgn-chip[aria-pressed="true"] { background: var(--ftgn-ink) !important; border-color: var(--ftgn-ink) !important; color: #fff !important; }
.ftgn-chip .ftgn-n { color: var(--ftgn-soft); font-weight: 400; margin-left: 3px; }
.ftgn-chip[aria-pressed="true"] .ftgn-n { color: inherit; opacity: .75; }
.ftgn-heartchip[aria-pressed="true"] { background: var(--ftgn-rouge) !important; border-color: var(--ftgn-rouge) !important; }
.ftgn-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ftgn-count { font-size: .9rem; color: var(--ftgn-soft); }
.ftgn-count b { color: var(--ftgn-ink); }
.ftgn-toolbar-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ftgn-seg { display: inline-flex; border: 1px solid var(--ftgn-line); border-radius: 10px; overflow: hidden; }
.ftgn-seg button { border: 0 !important; border-radius: 0 !important; background: #fff !important; padding: 6px 10px !important; font-size: .84rem !important; font-weight: 600 !important; color: var(--ftgn-soft) !important; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; line-height: 1.4 !important; }
.ftgn-seg button + button { border-left: 1px solid var(--ftgn-line) !important; }
.ftgn-seg button[aria-pressed="true"] { background: var(--ftgn-cream) !important; color: var(--ftgn-ink) !important; }
.ftgn-sort { border: 1px solid var(--ftgn-line) !important; border-radius: 10px !important; padding: 6px 8px !important; background: #fff !important; font-size: .84rem !important; height: auto !important; width: auto !important; margin: 0 !important; color: var(--ftgn-ink) !important; }
.ftgn mark, .ftgn-layer mark { background: var(--ftgn-mark); color: inherit; border-radius: 3px; padding: 0 1px; }
.ftgn-results { margin-top: 14px; min-height: 300px; }

/* Raster */
.ftgn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@container (min-width: 900px) { .ftgn-grid { grid-template-columns: repeat(4, 1fr); } }
@container (max-width: 520px) { .ftgn-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.ftgn-tile { position: relative; border-radius: 12px; overflow: hidden; background: var(--ftgn-cream); aspect-ratio: 9/14; }
.ftgn-open { position: absolute; inset: 0; display: block; color: #fff !important; text-decoration: none !important; border: 0 !important; box-shadow: none !important; }
.ftgn-open img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; transition: transform .35s ease; }
.ftgn-tile:hover img { transform: scale(1.04); }
.ftgn .ftgn-open, .ftgn .ftgn-open span { color: #fff !important; text-decoration: none !important; }
.ftgn-ov { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px; background: linear-gradient(to top, rgba(18,24,32,.9), rgba(18,24,32,0)); display: flex; flex-direction: column; gap: 2px; }
.ftgn-nr { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; font-weight: 700; }
.ftgn-ov .ftgn-fr { font-family: var(--ftgn-display); font-style: italic; font-weight: 700; font-size: clamp(.95rem, 2.6cqw, 1.12rem); line-height: 1.15; }
.ftgn-ov .ftgn-wort { font-size: .76rem; opacity: .88; line-height: 1.3; }
.ftgn-tile mark { background: var(--ftgn-mark); color: #1b2430; }
.ftgn-play { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.45); display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
.ftgn-tile:hover .ftgn-play { opacity: 1; }
.ftgn-play svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
.ftgn-vu { position: absolute; top: 10px; left: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: #2f9e5b; color: #fff; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.25); pointer-events: none; }
.ftgn-vu svg { width: 18px; height: 18px; }

/* Herz */
.ftgn-heart { position: absolute; top: 8px; right: 8px; z-index: 3; width: 38px; height: 38px; border-radius: 50% !important; border: 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; padding: 0 !important; margin: 0 !important; }
.ftgn-heart svg { width: 20px; height: 20px; fill: none; stroke: #c8423d; stroke-width: 2; }
.ftgn-heart[aria-pressed="true"] svg { fill: #c8423d; }
.ftgn-heart.ftgn-pop svg { animation: ftgn-pop .45s ease; }
@keyframes ftgn-pop { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
.ftgn-heart.ftgn-inline { position: static; box-shadow: none !important; border: 1px solid var(--ftgn-line) !important; width: 34px; height: 34px; flex: none; }

/* Kärtchen */
.ftgn-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@container (min-width: 900px) { .ftgn-cards { grid-template-columns: repeat(3, 1fr); } }
@container (max-width: 520px) { .ftgn-cards { grid-template-columns: 1fr; } }
.ftgn-kcard { background: var(--ftgn-paper); border: 1px solid var(--ftgn-line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.ftgn-kcard-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ftgn-kcard .ftgn-nr { color: var(--ftgn-rouge); opacity: 1; }
.ftgn-kcard .ftgn-fr { font-family: var(--ftgn-display); font-style: italic; font-weight: 700; font-size: 1.25rem; line-height: 1.15; }
.ftgn-kcard .ftgn-wort { color: var(--ftgn-soft); font-size: .9rem; }
.ftgn-reveal { border: 1.5px dashed var(--ftgn-line) !important; background: none !important; border-radius: 10px !important; padding: 9px 12px !important; text-align: left; font-size: .9rem !important; color: var(--ftgn-soft) !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; margin: 0 !important; line-height: 1.4 !important; font-weight: 400 !important; }
.ftgn-reveal b { color: var(--ftgn-ink); }
.ftgn-reveal.ftgn-shown { border-style: solid !important; border-color: var(--ftgn-ok) !important; background: var(--ftgn-ok-bg) !important; color: var(--ftgn-ink) !important; }
.ftgn-kcard-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }
.ftgn-seen { display: inline-flex; align-items: center; gap: 4px; color: #2f9e5b; font-weight: 700; font-size: .82rem; }
.ftgn-seen svg { width: 16px; height: 16px; }

/* Liste */
.ftgn-letters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.ftgn-letters button { width: 30px; height: 30px; padding: 0 !important; border-radius: 8px !important; border: 1px solid var(--ftgn-line) !important; background: #fff !important; font-weight: 700 !important; font-size: .85rem !important; color: var(--ftgn-ink) !important; margin: 0 !important; box-shadow: none !important; }
.ftgn-letters button:disabled { opacity: .3; cursor: default; }
.ftgn-lgroup h3 { font-family: var(--ftgn-display); font-size: 1.5rem; color: var(--ftgn-rouge); border-bottom: 1px solid var(--ftgn-line); padding-bottom: 4px; margin: 18px 0 4px !important; }
.ftgn-lrow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--ftgn-line); }
@container (max-width: 560px) { .ftgn-lrow { grid-template-columns: 1fr auto; } .ftgn-lrow .ftgn-kurz { grid-column: 1; } }
.ftgn-lrow .ftgn-t { border: 0 !important; background: none !important; padding: 0 !important; text-align: left; box-shadow: none !important; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
.ftgn-lrow .ftgn-fr { font-family: var(--ftgn-display); font-style: italic; font-weight: 700; font-size: 1.05rem; display: block; }
.ftgn-lrow .ftgn-wort { display: block; font-size: .82rem; color: var(--ftgn-soft); }
.ftgn-lrow .ftgn-kurz { font-size: .92rem; }

.ftgn-empty { text-align: center; padding: 30px 10px; display: grid; gap: 10px; justify-items: center; }
.ftgn-empty .ftgn-big { font-family: var(--ftgn-display); font-style: italic; font-size: 1.5rem; }

/* Detail */
.ftgn-layer { position: fixed; inset: 0; z-index: 100000; background: rgba(18,24,32,.6); display: grid; place-items: center; padding: 16px; animation: ftgn-fade .2s ease; color: var(--ftgn-ink); font-size: 15px; line-height: 1.55; }
@keyframes ftgn-fade { from { opacity: 0; } }
.ftgn-sheet { background: #fff; border-radius: 18px; width: min(940px, 100%); max-height: 100%; overflow: auto; display: grid; grid-template-columns: 320px 1fr; position: relative; animation: ftgn-up .25s ease; overscroll-behavior: contain; }
@keyframes ftgn-up { from { transform: translateY(16px); opacity: .6; } }
.ftgn-media { background: #000; position: relative; }
.ftgn-media .ftg-video-wrap { max-height: none; border-radius: 0; height: 100%; }
.ftgn-media .ftg-video-wrap video, .ftgn-media .ftg-video-wrap iframe { width: 100%; height: 100%; }
.ftgn-body { padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ftgn-body .ftgn-nr { color: var(--ftgn-rouge); opacity: 1; }
.ftgn-body .ftgn-fr { font-family: var(--ftgn-display); font-style: italic; font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.1; padding-right: 30px; }
.ftgn-body .ftgn-wort { color: var(--ftgn-soft); }
.ftgn-kurzbox { background: var(--ftgn-ok-bg); border-radius: 10px; padding: 10px 14px; }
.ftgn-kurzbox b { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; display: block; color: var(--ftgn-ok); }
.ftgn-bsp { font-style: italic; border-left: 3px solid var(--ftgn-line); padding-left: 12px; color: var(--ftgn-soft); }
.ftgn-erkl { white-space: pre-line; font-size: .95rem; }
.ftgn-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ftgn-acts .ftgn-btn svg { fill: none; stroke: currentColor; stroke-width: 2; }
.ftgn-acts .ftgn-btn.ftgn-on svg { fill: currentColor; }
.ftgn-share-row { display: none; gap: 6px; flex-wrap: wrap; }
.ftgn-share-row.ftgn-open-row { display: flex; }
.ftgn-share-row a, .ftgn-share-row button { border: 1px solid var(--ftgn-line) !important; background: var(--ftgn-paper) !important; border-radius: 999px !important; padding: 6px 12px !important; font-size: .85rem !important; font-weight: 600 !important; color: var(--ftgn-ink) !important; text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; margin: 0 !important; line-height: 1.4 !important; }
.ftgn-rezcard { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; border: 1px solid var(--ftgn-line); border-radius: 12px; padding: 8px; text-decoration: none !important; color: var(--ftgn-ink) !important; background: var(--ftgn-paper); box-shadow: none !important; }
.ftgn-rezcard img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; display: block; margin: 0 !important; }
.ftgn-rezcard small { display: block; color: var(--ftgn-rouge); font-weight: 700; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.ftgn-rezcard span { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.ftgn-eyebrow { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ftgn-rouge); font-weight: 700; margin-bottom: 6px; }
.ftgn-related { display: flex; gap: 6px; flex-wrap: wrap; }
.ftgn-related button { border: 1px solid var(--ftgn-line) !important; background: var(--ftgn-paper) !important; border-radius: 999px !important; padding: 4px 10px !important; font-family: var(--ftgn-display) !important; font-style: italic; font-size: .88rem !important; color: var(--ftgn-ink) !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; margin: 0 !important; line-height: 1.4 !important; font-weight: 400 !important; }
.ftgn-close { position: absolute; top: 10px; right: 10px; z-index: 5; width: 36px; height: 36px; border-radius: 50% !important; border: 0 !important; background: var(--ftgn-cream) !important; font-size: 1.3rem !important; line-height: 1 !important; padding: 0 !important; color: var(--ftgn-ink) !important; box-shadow: none !important; margin: 0 !important; }
.ftgn-nav { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--ftgn-line); padding-top: 12px; margin-top: 4px; }
.ftgn-nav button { border: 0 !important; background: none !important; color: var(--ftgn-soft) !important; font-weight: 600 !important; font-size: .86rem !important; padding: 4px 0 !important; text-align: left; max-width: 48%; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; margin: 0 !important; line-height: 1.4 !important; }
.ftgn-nav button:last-child { text-align: right; }
.ftgn-nav i { display: block; font-family: var(--ftgn-display); color: var(--ftgn-ink); }
@media (max-width: 720px) {
    .ftgn-layer { place-items: end center; padding: 0; }
    .ftgn-sheet { grid-template-columns: 1fr; border-radius: 18px 18px 0 0; max-height: 94%; }
    .ftgn-media .ftg-video-wrap { aspect-ratio: 9/16; height: auto; max-height: 70vh; margin: 0 auto; }
    .ftgn-body { padding: 20px 18px 28px; }
}
body.ftgn-noscroll { overflow: hidden; }

.ftgn-toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 100001; background: var(--ftgn-ink); color: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 600; font-size: .9rem; display: flex; gap: 14px; align-items: center; box-shadow: var(--ftgn-shadow); max-width: calc(100% - 32px); animation: ftgn-up .25s ease; }
.ftgn-toast button { border: 0 !important; background: none !important; color: #fff !important; text-decoration: underline; font-weight: 700 !important; padding: 0 !important; box-shadow: none !important; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }

/* Text unter der Sammlung */
.ftgn-about { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--ftgn-line, #e6dccb); }

@container (max-width: 560px) {
    .ftgn-daily { grid-template-columns: 105px 1fr; gap: 14px; padding: 14px; }
    .ftgn-daily-acts .ftgn-btn { padding: 7px 12px !important; font-size: .84rem !important; }
}
@media (prefers-reduced-motion: reduce) {
    .ftgn *, .ftgn-layer, .ftgn-layer *, .ftgn-toast { animation: none !important; transition: none !important; }
}

/* Druck: nur die Karte (ohne Foto, A6 oder A5; Maße in cqw passen für beide) */
.ftgn-row-lbl { font-size: .82rem; color: var(--ftgn-soft); align-self: center; margin-right: 2px; }
#ftgn-print { display: none; }
@media print {
    body.ftgn-drucken > *:not(#ftgn-print) { display: none !important; }
    body.ftgn-drucken { margin: 0 !important; padding: 0 !important; background: #fff !important; }
    body.ftgn-drucken #ftgn-print { display: block; }
}
#ftgn-print .ftgn-pp { container-type: inline-size; background: #fff; color: #34455c; overflow: hidden; position: relative; font-family: 'Open Sans', Arial, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#ftgn-print .ftgn-pp-a6 { width: 105mm; height: 147mm; }
#ftgn-print .ftgn-pp-a5 { width: 148mm; height: 209mm; }
#ftgn-print .ftgn-pp-rahmen { position: absolute; inset: 6cqw; border: .7cqw solid #c8423d; padding: 8cqw 7cqw; display: flex; flex-direction: column; gap: 3.2cqw; }
#ftgn-print .ftgn-pp-e { font-size: 3.4cqw; letter-spacing: .14em; text-transform: uppercase; color: #c8423d; font-weight: 700; }
#ftgn-print .ftgn-pp-f { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 700; font-size: 10cqw; line-height: 1.08; margin-top: 2cqw; }
#ftgn-print .ftgn-pp-w { font-size: 4.4cqw; color: #66768c; }
#ftgn-print .ftgn-pp-k { font-size: 5.4cqw; font-weight: 600; border-top: .3cqw solid #e6dccb; padding-top: 3.5cqw; margin-top: 1cqw; }
#ftgn-print .ftgn-pp-b { font-size: 4.2cqw; font-style: italic; color: #66768c; }
#ftgn-print .ftgn-pp-q { margin-top: auto; display: flex; gap: 4cqw; align-items: center; font-size: 3.4cqw; color: #66768c; line-height: 1.35; }
#ftgn-print .ftgn-pp-qr { width: 20cqw; height: 20cqw; flex: none; }
#ftgn-print .ftgn-pp-qr img, #ftgn-print .ftgn-pp-qr canvas { width: 100% !important; height: 100% !important; }

/* Teilen: eigene Farbe, damit es sich von Merken und Ausdrucken abhebt */
.ftgn-btn.ftgn-teilen { background: #2f6f8f !important; border-color: #2f6f8f !important; color: #fff !important; }

/* Computer (Maus): Themen-Knöpfe umbrechen statt seitlich scrollen, damit alle sichtbar sind */
@media (hover: hover) and (pointer: fine) {
    .ftgn-chips { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
}

/* ---------- Lernen: Karteikarten + Quiz ---------- */
.ftgn-lernen { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ftgn-line); scroll-margin-top: 80px; }
.ftgn .ftgn-h2 { font-family: var(--ftgn-display) !important; font-size: clamp(1.4rem, 4cqw, 1.9rem) !important; margin: 0 0 .3rem !important; color: var(--ftgn-ink) !important; }
.ftgn .ftgn-h3 { font-family: var(--ftgn-display) !important; font-size: 1.3rem !important; margin: 0 !important; color: var(--ftgn-ink) !important; }
.ftgn-small { font-size: .88rem; }
.ftgn-learn { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 1rem; }
@container (max-width: 640px) { .ftgn-learn { grid-template-columns: 1fr; } }
.ftgn-panel { background: var(--ftgn-paper); border: 1px solid var(--ftgn-line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ftgn-deck { width: 100% !important; }
.ftgn-flip { perspective: 1000px; height: 240px; border: 0 !important; background: none !important; padding: 0 !important; width: 100%; margin: 0 !important; box-shadow: none !important; display: block; }
.ftgn-flip-in { position: relative; display: block; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.3,.7,.3,1); transform-style: preserve-3d; }
.ftgn-flip.ftgn-turned .ftgn-flip-in { transform: rotateY(180deg); }
.ftgn-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22px 22px 34px; background: #fff; border: 1px solid var(--ftgn-line); box-shadow: var(--ftgn-shadow); color: var(--ftgn-ink); }
.ftgn-back { transform: rotateY(180deg); background: var(--ftgn-ink); color: #fff; border-color: var(--ftgn-ink); }
.ftgn-flip-fr { font-family: var(--ftgn-display); font-style: italic; font-weight: 700; font-size: 1.6rem; line-height: 1.15; }
.ftgn-flip-w { display: block; opacity: .8; font-size: .92rem; }
.ftgn-flip-k { display: block; font-size: 1.12rem; font-weight: 700; margin-top: 8px; }
.ftgn-hint { position: absolute; bottom: 12px; left: 0; right: 0; font-size: .76rem; opacity: .7; }
.ftgn-learn-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ftgn-learn-acts button, .ftgn-qopts button { border-radius: 12px !important; padding: 10px 12px !important; font-weight: 700 !important; font-size: .92rem !important; border: 1px solid var(--ftgn-line) !important; background: #fff !important; color: var(--ftgn-ink) !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; margin: 0 !important; line-height: 1.35 !important; }
.ftgn-learn-acts .ftgn-yes { background: var(--ftgn-ok-bg) !important; border-color: var(--ftgn-ok) !important; color: var(--ftgn-ok) !important; }
.ftgn-learn-acts .ftgn-no { background: var(--ftgn-rouge-soft) !important; border-color: var(--ftgn-rouge) !important; color: var(--ftgn-rouge) !important; }
.ftgn-bar-ink i { background: var(--ftgn-ink); }
.ftgn-score { display: flex; gap: 4px; flex-wrap: wrap; }
.ftgn-score span { width: 16px; height: 16px; border-radius: 50%; background: var(--ftgn-cream); }
.ftgn-score span.r { background: #2f9e5b; }
.ftgn-score span.w { background: var(--ftgn-rouge); }
.ftgn-qfr { font-family: var(--ftgn-display); font-style: italic; font-weight: 700; font-size: 1.45rem; line-height: 1.15; }
.ftgn-qopts { display: flex; flex-direction: column; gap: 8px; }
.ftgn-qopts button { text-align: left; font-weight: 600 !important; }
.ftgn-qopts button.right { background: var(--ftgn-ok-bg) !important; border-color: var(--ftgn-ok) !important; }
.ftgn-qopts button.wrong { background: var(--ftgn-rouge-soft) !important; border-color: var(--ftgn-rouge) !important; }
.ftgn-qnext { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ftgn-result { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 8px 0; }
.ftgn-result-big { font-family: var(--ftgn-display); font-size: 3rem; font-weight: 700; line-height: 1; }
.ftgn-result-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ---------- Einzelseite eines Spruchs ---------- */
.ftgn-einzel { background: var(--ftgn-paper); border: 1px solid var(--ftgn-line); border-radius: 18px; padding: 18px; }
.ftgn-zurueck { display: inline-block; margin-bottom: 12px; font-weight: 700; color: var(--ftgn-rouge) !important; text-decoration: none !important; }
.ftgn-einzel-grid { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.ftgn-einzel .ftgn-media { background: none; }
.ftgn-einzel .ftg-video-wrap { border-radius: 12px; max-height: none; }
.ftgn-einzel .ftgn-body { padding: 0; }
.ftgn-einzel .ftgn-wort { font-size: 1.05rem; }
.ftgn-mehr-h { margin-top: 2rem !important; }
@container (max-width: 620px) {
    .ftgn-einzel-grid { grid-template-columns: 1fr; }
    .ftgn-einzel .ftgn-media { max-width: 300px; margin: 0 auto; width: 100%; }
}

/* Einzelkarte: lange Sprüche kleiner, damit der QR-Code im Rahmen bleibt */
#ftgn-print .ftgn-pp-rahmen { overflow: hidden; }
#ftgn-print .ftgn-pp-mittel .ftgn-pp-f { font-size: 8.2cqw; }
#ftgn-print .ftgn-pp-lang .ftgn-pp-f { font-size: 6.6cqw; }
#ftgn-print .ftgn-pp-lang .ftgn-pp-rahmen { gap: 2.4cqw; padding-top: 6cqw; }
#ftgn-print .ftgn-pp-lang .ftgn-pp-b, #ftgn-print .ftgn-pp-mittel .ftgn-pp-b { font-size: 3.6cqw; }

/* Theme-Zeilenabstände nicht übernehmen */
.ftgn, .ftgn-layer { line-height: 1.45; }
.ftgn .ftgn-daily-fr, .ftgn .ftgn-ov .ftgn-fr, .ftgn .ftgn-fr { line-height: 1.12 !important; }
.ftgn .ftgn-daily-tag, .ftgn .ftgn-daily-wort { line-height: 1.35 !important; }

/* Handy: Spruch des Tages kompakt, Knöpfe in voller Breite darunter */
@container (max-width: 560px) {
    .ftgn-daily { 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" "acts acts"; align-items: start; }
    .ftgn-daily-txt { display: contents; }
    .ftgn-daily-img { grid-area: bild; }
    .ftgn-daily-tag { grid-area: tag; font-size: .95rem; }
    .ftgn-daily-fr { grid-area: fr; font-size: 1.4rem; margin: 0; }
    .ftgn-daily-wort { grid-area: wort; font-size: .9rem; }
    .ftgn-daily-acts { grid-area: acts; margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .ftgn-daily-acts .ftgn-btn { justify-content: center; padding: 8px 10px !important; font-size: .84rem !important; }
    .ftgn-daily-acts .ftgn-btn.ftgn-red { grid-column: 1 / -1; }
}

/* Meldung: volle Textbreite statt halber Bildschirmbreite (left: 50% begrenzt sonst die Breite), Theme-Zeilenabstand aus */
.ftgn-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; }
.ftgn-toast span, .ftgn-toast a, .ftgn-toast button { line-height: 1.35 !important; font-size: .92rem !important; white-space: normal; }
.ftgn-toast a, .ftgn-toast button { white-space: nowrap; flex: none; }