/* Food Site & Analytics — Frontend-Styles */

/* ── Zweispaltige Rezept-Karte ──────────────────────────────────────────── */
.fsa-recipe-outer {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
.fsa-recipe-main {
    vertical-align: top;
    padding-right: 32px;
}
.fsa-recipe-sidebar {
    vertical-align: top;
    width: 300px;
    min-width: 260px;
}

/* Auf kleinen Bildschirmen untereinander stapeln */
@media (max-width: 680px) {
    .fsa-recipe-outer,
    .fsa-recipe-outer tbody,
    .fsa-recipe-outer tr,
    .fsa-recipe-outer td { display: block; width: 100% !important; }
    .fsa-recipe-main { padding-right: 0; }
    .fsa-recipe-sidebar { margin-top: 24px; }
}

.fsa-portions-wrap { margin-bottom: 16px; }
.fsa-portions-input { width: 60px; text-align: center; }

.fsa-ingredients { margin: 20px 0; }
.fsa-ingredients h3 { margin-bottom: 8px; }
.fsa-ingredients ul { padding-left: 20px; }
.fsa-ingredients li { margin-bottom: 4px; }

.fsa-instructions { margin: 20px 0; }

/* Nährwert-Tabelle (Standard) */
.fsa-nutrition-label { max-width: 100%; }
.fsa-nutrition-label h3 { margin-bottom: 10px; }
.fsa-nw-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fsa-nw-table th,
.fsa-nw-table td { padding: 6px 10px; border-bottom: 1px solid #e8e8e8; }
.fsa-nw-table thead th { background: #222; color: #fff; }
.fsa-nw-table th:nth-child(2),
.fsa-nw-table th:nth-child(3),
.fsa-nw-table th:nth-child(4),
.fsa-nw-table td:nth-child(2),
.fsa-nw-table td:nth-child(3),
.fsa-nw-table td:nth-child(4) { text-align: right; white-space: nowrap; }
.fsa-nw-table .fsa-nw-total td { font-weight: 700; background: #f7f7f7; }
.fsa-nw-table .fsa-nw-sub td:first-child { padding-left: 24px; font-size: 13px; color: #555; }
.fsa-nw-table .fsa-nw-sub td { border-bottom-color: #f0f0f0; }
.fsa-ri-note { font-size: 11px; color: #777; margin-top: 6px; }

/* Mikronährstoffe (V2) */
.fsa-micronutrients { width: 100%; margin: 24px 0; }
.fsa-micro-group { width: 100%; margin-bottom: 8px; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; }
.fsa-micro-group summary { padding: 9px 14px; cursor: pointer; font-weight: 600; background: #f5f5f5; user-select: none; list-style: none; }
.fsa-micro-group summary::-webkit-details-marker { display: none; }
.fsa-micro-group summary::before { content: '▶'; font-size: 10px; margin-right: 8px; color: #888; transition: transform .15s; display: inline-block; }
.fsa-micro-group[open] summary::before { transform: rotate(90deg); }
.fsa-micro-group summary:hover { background: #ececec; }
.fsa-micro-table-wrap { display: block; width: 100%; }
.fsa-micro-table-wrap .fsa-micro-table { width: 100% !important; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.fsa-micro-table-wrap .fsa-micro-table th,
.fsa-micro-table-wrap .fsa-micro-table td { padding: 8px 12px; border-bottom: 1px solid #e5e5e5; }
.fsa-micro-table-wrap .fsa-micro-table thead th { background: #fafafa; font-weight: 600; }
/* Spaltenbreiten: Name nimmt restlichen Platz, Wert + % RI fest */
.fsa-micro-table-wrap .fsa-micro-table th:nth-child(1),
.fsa-micro-table-wrap .fsa-micro-table td:nth-child(1) { text-align: left; padding-left: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsa-micro-table-wrap .fsa-micro-table th:nth-child(2),
.fsa-micro-table-wrap .fsa-micro-table td:nth-child(2) { text-align: right; width: 120px; white-space: nowrap; }
.fsa-micro-table-wrap .fsa-micro-table th:nth-child(3),
.fsa-micro-table-wrap .fsa-micro-table td:nth-child(3) { text-align: right; width: 80px; white-space: nowrap; padding-right: 20px; }
/* Gruppengesamt-Zeile (z.B. Essenzielle Aminosäuren gesamt) */
.fsa-micro-table-wrap .fsa-micro-table .fsa-nw-total td { font-weight: 700; background: #f7f7f7; border-top: 1px solid #d8d8d8; }

.fsa-notes { margin: 20px 0; background: #fffbec; border-left: 4px solid #f0c000; padding: 12px 16px; }
.fsa-notes h3 { margin-bottom: 6px; }

/* ── Allergene ────────────────────────────────────────────────────────────── */
.fsa-allergens { margin: 20px 0; }
.fsa-allergens-list { list-style: none; padding: 0; margin: 8px 0 6px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.fsa-allergens-list li { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.fsa-allergen-no  { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 11px; padding: 0 4px; background: #e8f0e8; color: #2d6a2d; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.fsa-allergen-abbr { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 11px; padding: 0 5px; background: #e8ecf5; color: #1a3a7a; font-size: 11px; font-weight: 700; flex-shrink: 0; }

/* ── Gericht-Block (60 / 40-Layout) ───────────────────────────────────────── */
.fsa-dish-wrap {
    display: grid;
    grid-template-columns: 3fr 2fr;   /* 60 % / 40 % */
    column-gap: 32px;
    align-items: start;
}

/* Alle Kind-Blöcke in Spalte 1 */
.fsa-dish-wrap > * {
    grid-column: 1;
}

/* Bild in Spalte 2, beginnt in Zeile 1 und überbrückt alle Inhaltszeilen */
.fsa-dish-wrap > .fsa-recipe-image {
    grid-column: 2;
    grid-row: 1 / span 20;
}

/* Auf schmalen Bildschirmen untereinander stapeln */
@media (max-width: 680px) {
    .fsa-dish-wrap {
        display: block;
    }
    .fsa-dish-wrap > .fsa-recipe-image {
        margin: 20px 0;
    }
}