body.oca .ocav-wrap{
  margin:26px 0 30px; padding:18px 16px 14px;
  background:var(--oca-einsatz); border:1px solid var(--oca-linie); border-radius:12px;
  scroll-margin-top:18px;
}
body.oca .ocav-h{
  margin:0 0 12px; font:700 23px/1.26 var(--oca-antiqua); color:var(--oca-tinte);
}

body.oca .ocav-f,body.oca .ocav-more{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}

body.oca .ocav-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px;
}
body.oca .ocav-bar__h{font:600 14px/1 var(--oca-grotesk); color:var(--oca-matt)}
body.oca .ocav-chip-f{
  display:inline-block; padding:6px 12px; cursor:pointer;
  font:600 14px/1.2 var(--oca-grotesk); color:var(--oca-pfl-t);
  background:#fff; border:1px solid var(--oca-linie); border-radius:999px;
}
body.oca .ocav-chip-f:hover{border-color:var(--oca-pfl-t)}
body.oca .ocav-f:focus-visible+.ocav-bar .ocav-chip-f,
body.oca .ocav-chip-f:focus-visible{outline:2px solid var(--oca-nacht); outline-offset:2px}
body.oca .ocav-f--fs:checked~.ocav-bar [for$="-fs"],
body.oca .ocav-f--live:checked~.ocav-bar [for$="-live"],
body.oca .ocav-f--gross:checked~.ocav-bar [for$="-gross"],
body.oca .ocav-f--mob:checked~.ocav-bar [for$="-mob"],
body.oca .ocav-f--pp:checked~.ocav-bar [for$="-pp"]{
  background:var(--oca-pflaume); border-color:var(--oca-pflaume); color:#fff;
}

body.oca .ocav-f--fs:checked~.ocav-list>li:not([data-fs]),
body.oca .ocav-f--live:checked~.ocav-list>li:not([data-live]),
body.oca .ocav-f--gross:checked~.ocav-list>li:not([data-gross]),
body.oca .ocav-f--mob:checked~.ocav-list>li:not([data-mob]),
body.oca .ocav-f--pp:checked~.ocav-list>li:not([data-pp]){display:none}

body.oca .ocav-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}

body.oca .ocav-row{
  display:grid; align-items:center; gap:14px;
  grid-template-columns:28px 164px minmax(140px,1fr) 190px 150px;
  grid-template-rows:116px minmax(24px,auto);
  padding:16px 14px; background:var(--oca-blatt);
  border:1px solid var(--oca-linie); border-radius:10px;
}

body.oca .ocav-list>li.ocav-hid{display:none}
body.oca .ocav-more:checked~.ocav-list>li.ocav-hid{display:grid}
body.oca .ocav-mehr{
  display:block; margin:12px auto 2px; width:max-content; padding:9px 20px; cursor:pointer;
  font:600 15px/1.2 var(--oca-grotesk); color:var(--oca-nacht);
  background:#fff; border:1px solid var(--oca-nacht); border-radius:8px;
}
body.oca .ocav-mehr:hover{background:var(--oca-platte)}
body.oca .ocav-more:checked~.ocav-mehr{display:none}

body.oca .ocav-rank{
  font:700 17px/1.1 var(--oca-antiqua); color:var(--oca-matt); text-align:center;
}
body.oca .ocav-hot{
  display:block; margin-top:4px; padding:1px 0;
  font:700 10px/1.4 var(--oca-grotesk); letter-spacing:.06em;
  color:#fff; background:var(--oca-pflaume); border-radius:4px;
}

body.oca .ocav-tile{
  box-sizing:content-box; display:flex; align-items:center; justify-content:center;
  --plate-h:104px;
  width:min(150px, calc(var(--plate-h) * var(--arw) / var(--arh)));
  aspect-ratio:var(--arw)/var(--arh); height:auto; max-height:var(--plate-h);
  margin:0 auto; padding:5px; background:#fff;
  border:1px solid #e3e7ee; border-radius:6px;
}
body.oca .ocav-tile img{width:100%; height:100%; object-fit:contain; display:block}

body.oca .ocav-id{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px}
body.oca .ocav-name{
  font:700 18px/1.25 var(--oca-grotesk); color:var(--oca-tinte); width:100%;
}
body.oca .ocav-stars{
  display:inline-flex; align-items:center; gap:5px;
  font:700 14px/1 var(--oca-grotesk); color:var(--oca-matt);
}
body.oca .ocav-stars i{
  width:13px; height:13px; background:var(--oca-pflaume);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
body.oca .ocav-rev{font:600 14px/1 var(--oca-grotesk); color:var(--oca-pfl-t)}

body.oca .ocav-offer{
  padding:9px 12px; background:var(--oca-einsatz);
  border-left:3px solid var(--oca-pflaume); border-radius:0 8px 8px 0;
}
body.oca .ocav-offer__lbl{
  display:block; font:600 12px/1.3 var(--oca-grotesk); letter-spacing:.04em;
  text-transform:uppercase; color:var(--oca-matt);
}
body.oca .ocav-offer__mech{
  display:block; margin-top:2px;
  font:700 17px/1.3 var(--oca-grotesk); color:var(--oca-pfl-t);
}
body.oca .ocav-offer__add{
  display:block; font:600 14px/1.35 var(--oca-grotesk); color:var(--oca-tinte);
}

body.oca .ocav-merk{grid-column:2/-1; grid-row:2; margin-top:-2px}
body.oca .ocav-chips{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px;
}
body.oca .ocav-chips li{
  padding:3px 9px; font:400 13px/1.4 var(--oca-grotesk); color:var(--oca-matt);
  background:var(--oca-einsatz); border-radius:999px;
}

body.oca .ocav-auf,body.oca .ocav-auf__l{display:none}

body.oca .ocav-go{
  display:block; padding:13px 10px; text-align:center; text-decoration:none;
  font:700 16px/1.2 var(--oca-grotesk); color:#fff;
  background:var(--oca-pflaume); border-radius:8px;
}
body.oca .ocav-go:hover{background:var(--oca-pfl-t)}

body.oca .ocav-fuss{
  margin:12px 2px 0; font:400 13px/1.55 var(--oca-grotesk); color:var(--oca-matt);
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media (max-width:719px){
  
  body.oca .ocav-wrap{padding:14px 12px 12px; border-radius:10px}
  body.oca .ocav-h{font-size:20px}
  body.oca .ocav-row{
    grid-template-columns:26px 1fr; grid-template-rows:auto;
    gap:8px 10px; padding:12px 11px;
  }
  body.oca .ocav-tile{--plate-h:92px; width:min(130px, calc(var(--plate-h)*var(--arw)/var(--arh)));
    margin:0; grid-column:2}
  body.oca .ocav-rank{grid-row:1; align-self:start; padding-top:4px}
  body.oca .ocav-id{grid-column:1/-1}
  body.oca .ocav-offer{grid-column:1/-1}
  body.oca .ocav-merk{grid-column:1/-1; grid-row:auto; margin-top:0}
  body.oca .ocav-go{grid-column:1/-1}
  
  body.oca .ocav-auf__l{
    display:block; width:max-content; padding:4px 0; cursor:pointer;
    font:600 14px/1.2 var(--oca-grotesk); color:var(--oca-pfl-t);
  }
  body.oca .ocav-auf__l::after{content:" ▾"}
  body.oca .ocav-auf:checked+.ocav-auf__l+.ocav-chips{display:none}
  body.oca .ocav-auf:checked+.ocav-auf__l::after{content:" ▸"}
}