/* ============================================================
   EasyUsenet - member-products.css
   Extends member.css (cards, value lists and buttons come from there),
   so ALWAYS load it after base.css AND member.css.
   ============================================================ */

.pr-back{display:inline-flex;align-items:center;gap:7px;font-family:'Sora','Sora Fallback',sans-serif;font-size:13.5px;font-weight:800;color:var(--muted);margin-bottom:10px}
.pr-back:hover{color:var(--text)}

.pr-card + .pr-card{margin-top:24px}
.pr-sub{font-size:14.5px;color:var(--muted);line-height:1.55;margin-top:7px}

/* Two value lists side by side - the rules run through per column */
.pr-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin-top:4px}

/* --- Tabellen --- */
.pr-tab-huelle{position:relative;margin-top:18px;overflow-x:auto}
.pr-tab{width:100%;border-collapse:collapse;font-size:14.5px}
.pr-tab th{text-align:left;font-family:'Sora','Sora Fallback',sans-serif;font-size:11.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);padding:0 16px 10px 0;border-bottom:2px solid #E3DED0;white-space:nowrap}
.pr-tab th:last-child,.pr-tab td:last-child{padding-right:0;text-align:right}
.pr-tab td{padding:13px 16px 13px 0;border-bottom:1px solid #EFEADD;font-weight:600;white-space:nowrap}
.pr-tab tbody tr:last-child td{border-bottom:none}
.pr-tab td:first-child{font-weight:700}
.pr-tab .mb-pdf{white-space:nowrap}

.pr-help{text-align:center;font-size:14px;font-weight:600;color:var(--muted);margin-top:30px}
.pr-help a{color:var(--text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}

/* ============================================================
   Responsive - these rules come AFTER the components, otherwise
   the component wins (a media query does not raise specificity).
   ============================================================ */
@media (max-width:1000px){
.pr-zwei{gap:0 30px}
}
@media (max-width:720px){
.pr-zwei{grid-template-columns:1fr;gap:0}
/* Every row becomes a small block: the column names then stand in front of the
   value (data-col) and the table head disappears. */
.pr-tab-huelle{overflow-x:visible}
.pr-tab,.pr-tab tbody,.pr-tab tr,.pr-tab td{display:block;width:100%}
/* Head removed: once stacked, every cell carries its own column name (data-col,
   see td::before). A merely hidden thead would still have its cells positioned
   beside the window in the layout calculation. */
.pr-tab thead{display:none}
.pr-tab tr{padding:14px 0;border-bottom:2px solid #E3DED0}
.pr-tab tbody tr:last-child{border-bottom:none;padding-bottom:0}
.pr-tab td{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:5px 0;border-bottom:none;white-space:normal;text-align:right}
.pr-tab td::before{content:attr(data-col);flex:none;font-family:'Sora','Sora Fallback',sans-serif;font-size:11.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);text-align:left}
.pr-tab td:first-child{font-size:16px;font-weight:800;padding-bottom:9px}
.pr-tab td:last-child{text-align:right}
}