/* ═══════════════════════════════════════════════════════════════
   FLASCHENFINDER | wine_page.css (Weinseite /weine/<slug>/ und
   "Andere Jahrgänge" auf der Angebotsseite). Baut auf detail.css auf.
   ═══════════════════════════════════════════════════════════════ */
.ff-wine__top {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 8px 0 24px;
}
.ff-wine__image {
    flex: 0 0 auto;
    width: 96px;
    height: auto;
    max-height: 200px;
    object-fit: contain;
}
@media (min-width: 768px) { .ff-wine__image { width: 160px; max-height: 280px; } }
.ff-wine__lead {
    margin: 14px 0 0;
    line-height: 1.6;
    color: var(--ff-text);
    max-width: 70ch;
}

.ff-wine__tablewrap { position: relative; overflow-x: auto; }  /* relative: haelt .sr-only im Scrollbereich */
.ff-wine__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.ff-wine__table th,
.ff-wine__table td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--ff-border-light);
    white-space: nowrap;
}
.ff-wine__table thead th { font-size: 13px; font-weight: 600; color: var(--ff-text-light); }
.ff-wine__table .ff-num { text-align: right; font-variant-numeric: tabular-nums; }
.ff-wine__table .pdp-link { min-height: 0; }
.ff-wine__table tr.is-inactive th,
.ff-wine__muted { color: var(--ff-text-light); }

/* Angebotsseite: andere Jahrgänge und Größen als Vergleichstabelle (Entwurf "Jahrgänge A").
   Die aktuelle Auswahl steht oben, Unterschiede sind markiert. Auf dem Handy wird jede
   Zeile zu einer Karte (Beschriftung aus data-label), ab Tablet eine echte Tabelle. */
.ff-vtable__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.ff-vtable__lead { margin: 0; color: var(--ff-text-muted); font-size: 15px; line-height: 1.5; }
.ff-vtable__wrap { position: relative; }
.ff-vtable__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.ff-vtable__table thead { display: none; }
.ff-vtable__table tbody { display: grid; gap: 10px; }
.ff-vtable__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    padding: 14px;
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius-lg, 15px);
    background: var(--ff-bg);
}
.ff-vtable__row.is-current { border: 1.5px solid var(--ff-primary); background: #f3f8f8; }
.ff-vtable__row > th,
.ff-vtable__row > td { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0; text-align: left; font-weight: 400; }
.ff-vtable__row > th { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.ff-vtable__row > td[data-label]::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    color: var(--ff-text-light);
}
.ff-vtable__action { grid-column: 1 / -1; }

.ff-vtable__diff {
    padding: 1px 8px;
    border-radius: 6px;
    background: #FBF3E4;
    color: #7A4A00;
    font-weight: 800;
}
.ff-vtable__value { font-weight: 700; }
.ff-vtable__note { font-size: 13px; font-weight: 400; color: var(--ff-text-muted); }
.ff-vtable__you {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: var(--ff-primary);
    border-radius: 999px;
    padding: 3px 10px;
}
.ff-vtable__good { color: #1E6B3A; font-weight: 700; }
.ff-vtable__badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    color: #1E6B3A;
    background: #e7f2ec;
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}
.ff-vtable__table strong { font-size: 17px; color: var(--ff-primary-dark); font-variant-numeric: tabular-nums; }
.ff-vtable__table strong.ff-vtable__good { color: #1E6B3A; }
.ff-vtable__here { font-size: 14px; color: var(--ff-text-muted); }
.ff-vtable__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1.5px solid var(--ff-primary);
    border-radius: 999px;
    color: var(--ff-primary);
    font-weight: 700;
    text-decoration: none;
    width: 100%;
}
.ff-vtable__link:hover { background: var(--ff-primary); color: #fff; }

.ff-vtable__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    margin-top: 16px;
    padding: 10px 22px;
    border-radius: 16px;
    background: var(--ff-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}
.ff-vtable__all svg { flex: 0 0 auto; }
.ff-vtable__all:hover { background: var(--ff-primary-dark); color: #fff; }

@media (min-width: 768px) {
    .ff-vtable__table { display: table; }
    .ff-vtable__table thead { display: table-header-group; }
    .ff-vtable__table tbody { display: table-row-group; }
    .ff-vtable__row { display: table-row; padding: 0; border: 0; background: none; }
    .ff-vtable__table th,
    .ff-vtable__table td {
        display: table-cell;
        vertical-align: middle;
        padding: 12px 14px;
        border-bottom: 1px solid var(--ff-border-light);
        text-align: left;
    }
    .ff-vtable__table thead th { font-size: 13px; font-weight: 600; color: var(--ff-text-light); white-space: nowrap; }
    .ff-vtable__row > th { font-size: 16px; }
    .ff-vtable__row > th > * { margin-right: 8px; }
    .ff-vtable__row > td[data-label]::before { content: none; }
    .ff-vtable__row > td > .ff-vtable__badge { margin-top: 4px; }
    .ff-vtable__row.is-current > th,
    .ff-vtable__row.is-current > td { background: #f3f8f8; border-top: 1.5px solid var(--ff-primary); border-bottom: 1.5px solid var(--ff-primary); }
    .ff-vtable__row.is-current > th { border-left: 1.5px solid var(--ff-primary); border-radius: 12px 0 0 12px; }
    .ff-vtable__row.is-current > td:last-child { border-right: 1.5px solid var(--ff-primary); border-radius: 0 12px 12px 0; }
    .ff-vtable__link { width: auto; }
    .ff-vtable__all { width: fit-content; min-width: min(420px, 100%); margin-left: auto; margin-right: auto; border-radius: 999px; }
}