/* ===================== TGF.Feedback ===================== */
/* Ein Modul rendert die ganze Feedbackseite: Lead (voll breit) → Bewertungs-Box (rechts gefloatet)
   → Rückmeldungen als „Zettel" (einspaltig, chronologisch, fliessen um die Box). */

/* ---- Intro-Lead (oben, volle Breite) ---- */
.tgf-fb-intro {
    font-size: 1.15rem; line-height: 1.6; color: #3d3125; margin: 0 0 1.6rem; max-width: 62ch;
}
.tgf-fb-intro a { color: var(--red, #b3122a); }

/* ---- Bewertungs-Box: rechts gefloatet, die Zettel fliessen darum herum ---- */
.tgf-fb-box {
    float: right; width: 300px; max-width: 42%; margin: .2rem 0 22px 34px;
    background: #EBE0CA; border-left: 4px solid var(--red, #b3122a);
    border-radius: 0 .45rem .45rem 0; padding: 20px 24px;
}
@media (max-width: 800px) { .tgf-fb-box { float: none; width: auto; max-width: none; margin: 0 0 24px; } }
.tgf-fb-box-titel {
    font-family: var(--font-label, sans-serif); text-transform: uppercase; letter-spacing: .14em;
    font-weight: 600; font-size: .8rem; color: var(--red, #b3122a); margin: 0 0 .5em;
}
.tgf-fb-avg { font-size: 3rem; line-height: 1; color: #241b12; margin: 0 0 .45em; }
.tgf-fb-vert { width: 100%; border-collapse: collapse; }
.tgf-fb-vert td { padding: .2em .3em; vertical-align: middle; border-top: 1px solid rgba(36, 27, 18, .1); }
.tgf-fb-vert tr:first-child td { border-top: 0; }
.tgf-fb-cnt {
    width: 1%; white-space: nowrap; padding-right: .8em; color: #3d3125; font-variant-numeric: tabular-nums;
}
.tgf-fb-rate { white-space: nowrap; }
.tgf-fb-rate .fa-star { font-size: .9rem; }
.tgf-fb-rate .is-on { color: #f5b301; }
.tgf-fb-pct {
    text-align: right; white-space: nowrap; color: #8a7a5e; font-size: .85rem; font-variant-numeric: tabular-nums;
}
.tgf-fb-total { margin: .9em 0 0; color: #6f5e4a; font-size: .9rem; }

/* ---- Liste: einspaltige „Zettel" (voice2 vom Theme), die um die Box fliessen ---- */
/* Jeder Zettel ist ein eigener Block-Formatierungskontext (display: flow-root) → er weicht der
   gefloateten Box aus (neben der Box schmaler, darunter über die ganze Breite) und überlappt sie
   nicht. Einspaltig = klare Chronologie, keine vertikalen Lücken (sauberes Block-Stapeln). */
.tgf-fb-list { max-width: none; }
.tgf-fb-list .paper-defs { display: inline; }
.tgf-fb-card {
    display: flow-root; max-width: none; margin: 0 0 16px;
    filter: drop-shadow(0 2px 6px rgba(36, 27, 18, .12));
}

/* Meta-Zeile (Bewertung + Zeitstempel) in EINER Zeile, rechtsbündig: erst Sterne, daneben Datum. */
.tgf-fb-card .tgf-fb-meta {
    display: flex; align-items: center; justify-content: flex-end; gap: .8em;
    margin-top: .9em; font-family: var(--font-label, sans-serif);
}
.tgf-fb-stars { display: inline-flex; line-height: 1; }
.tgf-fb-stars .fa-star { font-size: .95rem; }
.tgf-fb-stars .is-on { color: #f5b301; }
.tgf-fb-stars .is-off { color: rgba(36, 27, 18, .18); }
.tgf-fb-date { font-size: .82rem; color: #8a7a5e; white-space: nowrap; }