/* ========== Orty’s Pricelist – FINAL opc.css ========== */

/* Basisfarben/Vars */
.opc{
  --blue:#2b5fb3;
  --text:#0f172a;
  --muted:#475569;
  --line:#c8d2e3;
  --colw:5.5ch; /* Mindestbreite je Zahlen-Spalte */
}

/* 100% Breite, keine rechte Spalte erzwingen */
.opc-grid{ display:block; }
.opc-right{ display:none !important; }

/* Kategorien & Header */
.opc-cat{ border-bottom:3px solid var(--blue); padding-bottom:14px; }
.opc-cat + .opc-cat{ margin-top:30px; }

.opc-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; cursor:pointer;
}
.opc-title{ margin:0; font-size:28px; font-weight:700; color:var(--text); }
.opc-toggle{
  width:28px; height:28px; border:2px solid var(--blue); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .2s; pointer-events:none;
}
.opc-cat.is-open .opc-toggle{ transform:rotate(180deg); }

.opc-body{ display:none; padding-top:16px; }
.opc-footnote{ margin-top:22px; color:var(--muted); font-size:14px; line-height:1.7; }

/* Texte */
.opc-name{ font-size:16px; color:var(--text); font-weight:700; margin:0; }
.opc-note{ font-size:13px; color:var(--muted); margin-top:2px; }

/* ------------------------------------------------------
   Gemeinsames Raster: 5 Spalten (1 = Name | 2–5 = Werte)
   Gilt für ALLE Zeilen – Steps und Single.
   ------------------------------------------------------ */
.opc .opc-row{
  display:grid;
  grid-template-columns: 1fr repeat(4, minmax(var(--colw), auto));
  column-gap:24px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.opc .opc-row:last-child{ border-bottom:0; }

/* Steps-Header (S/M/L/XL etc.) exakt über die 4 Zahlenspalten */
.opc .opc-steps-head{
  display:grid;
  grid-template-columns: 1fr repeat(4, minmax(var(--colw), auto));
  column-gap:24px;
  margin:0 0 10px 0;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.opc .opc-steps-head::before{ content:""; }     /* leere Namensspalte */
.opc .opc-steps-head > span{ justify-self:end; }

/* Name in Spalte 1 */
.opc .opc-name-wrap{ grid-column:1; padding-right:8px; }

/* Steps-Preise (vier Werte): über Spalten 2–5 des Zeilenrasters legen */
.opc .opc-grid-steps{
  grid-column:2 / 6;
  display:grid;
  grid-template-columns: repeat(4, minmax(var(--colw), auto));
  column-gap:24px;
}
.opc .opc-grid-steps > div{
  justify-self:end;
  text-align:right;
  font-weight:700; color:var(--text);
  line-height:1.25;
}

/* Einzelpreis: rechts in der letzten (5.) Spalte ausrichten */
.opc .opc-price-single{
  grid-column:5;
  justify-self:end;
  text-align:right;
  font-weight:700; color:var(--text);
  line-height:1.25;
}

/* Kleinigkeiten */
.opc .opc-name-wrap .opc-note{ margin-top:2px; }